Berikut ini's my HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Saya ingin membuat nama produk (yaitu 'Product1', 'Produk2' , dll) berani, dan kategori(yaitu. Elektronik, Olahraga, dll) yang dicetak miring, dengan menggunakan CSS saja. Saya menemukan sebuah pertanyaan lama yang disebutkan itu's tidak mungkin menggunakan HTML dan CSS, tapi mudah-mudahan, ada's solusi sekarang.
Hanya ada beberapa atribut gaya yang dapat diterapkan untuk sebuah <option>
elemen.
Hal ini karena jenis elemen adalah contoh dari "diganti elemen". Mereka adalah OS yang tergantung dan bukan bagian dari HTML/browser. Hal ini tidak dapat ditata melalui CSS
.
Ada pengganti plugin/library yang terlihat seperti <select>
tetapi sebenarnya terdiri dari regular HTML
unsur-unsur yang BISA ditata.
Tidak, itu's tidak mungkin, karena styling untuk elemen-elemen ini ditangani oleh pengguna's OS. [MSDN akan menjawab pertanyaan anda di sini][1]:
Kecuali untuk
background-color
danwarna
, pengaturan gaya yang diterapkan melalui gaya objek untuk opsi elemen diabaikan.
[1]: https://web.archive.org/web/20170528070441/http://msdn.microsoft.com/en-us/library/ms535877(v=vs. 85).aspx
Anda dapat gaya pilihan elemen untuk batas tertentu.
Menggunakan * tag CSS anda dapat gaya pilihan dalam kotak penalti yang diambil oleh sistem.
Contoh:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
Itu akan terlihat seperti ini:
Saya menemukan dan menggunakan ini contoh yang baik dari styling memilih dan pilihan.Anda dapat melakukan ini dengan memilih semua yang anda inginkan.Berikut ini adalah [Biola][1]
html
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
css
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial, Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active, .styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
}
.options li:hover {
background-color:#39f;
color:white;
}
JS
// Iterate over each select element
$('select').each(function () {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
Sepertinya aku hanya bisa mengatur CSS untuk pilih
di Chrome langsung. CSS dan kode HTML yang diberikan di bawah ini :
.boldoption {
font-weight: bold;
}
<select>
<option>Some normal-font option</option>
<option>Another normal-font option</option>
<option class="boldoption">Some bold option</option>
</select>
Berikut ini's beberapa cara untuk gaya <option>
bersama dengan <select>
jika anda're menggunakan Bootstrap dan/atau jquery. Saya mengerti ini isn't apa asli poster meminta tapi saya pikir saya bisa membantu orang lain yang tersandung ke pertanyaan ini.
Anda masih dapat mencapai tujuan gaya masing-masing <option>
secara terpisah, tapi mungkin perlu untuk menerapkan beberapa style untuk <select>
juga. Favorit saya adalah "Bootstrap Pilih" perpustakaan yang disebutkan di bawah ini.
Jika anda're sudah menggunakan bootstrap, anda dapat mencoba Bootstrap Pilih perpustakaan atau perpustakaan di bawah ini (karena memiliki tema bootstrap).
Perhatikan bahwa anda dapat gaya seluruh pilih
elemen, atau pilihan
elemen secara terpisah.
Contoh:
Ketergantungan: membutuhkan jQuery v1.9.1+, Bootstrap, Bootstrap ini dropdown.js komponen, dan Bootstrap's CSS
Kompatibilitas: tidak Yakin, tapi bootstrap mengatakan "mendukung terbaru, rilis stabil dari semua browser utama dan platform"
Demo: https://developer.snapappointments.com/bootstrap-select/examples/
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
Ada's perpustakaan anda dapat menggunakan yang disebut Select2.
Ketergantungan: Perpustakaan adalah JS + CSS + HTML saja (tidak memerlukan JQuery).
Kompatibilitas: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Demo: https://select2.org/getting-started/basic-usage
Ada's juga bootstrap theme yang tersedia.
Tidak ada Bootstrap contoh:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
Bootstrap contoh:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
Jika anda memiliki uang ekstra, anda dapat menggunakan premium perpustakaan MDBootstrap. (Ini adalah seluruh UI Kit, jadi itu's tidak ringan)
Hal ini memungkinkan anda untuk gaya anda pilih dan pilihan elemen menggunakan Material desain.
Ada versi gratis, tapi itu tidak't memungkinkan anda untuk menggunakan cukup Bahan desain!
Ketergantungan: Bootstrap 4, JQuery,
Kompatibilitas: "mendukung terbaru, rilis stabil dari semua browser utama dan platform."
Demo: https://mdbootstrap.com/docs/jquery/forms/select/#color
Bootstrap memungkinkan anda untuk menggunakan styling melalui data-isi:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
Contoh: https://silviomoreto.github.io/bootstrap-select/examples/
Meninggalkan di sini alternatif yang cepat, menggunakan class beralih pada meja. Perilaku ini sangat mirip dari pilih, tapi bisa ditata dengan transisi, filter dan warna, masing-masing anak secara individual.
function toggleSelect(){
if (store.classList[0] === "hidden"){
store.classList = "viewfull"
}
else {
store.classList = "hidden"
}
}
#store {
overflow-y: scroll;
max-height: 110px;
max-width: 50%
}
.hidden {
display: none
}
.viewfull {
display: block
}
#store :nth-child(4) {
background-color: lime;
}
span {font-size:2rem;cursor:pointer}
<span onclick="toggleSelect()">⮋</span>
<div id="store" class="hidden">
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
</div>
Beberapa sifat yang bisa ditata untuk<option>
tag:
font-family
warna
font-*
background-color
Anda juga dapat menggunakan font kustom untuk masing-masing <option>
tag, misalnya setiap google font, Ikon Materi atau ikon font dari icomoon atau sama. (Yang mungkin akan berguna untuk font penyeleksi dll.)
Mengingat itu, anda dapat menciptakan font-family stack dan menyisipkan ikon di <option>
kategori, misalnya.
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option>
</select>
di mana oo
diambil dari Ikon
dan sisanya adalah dari Roboto
.
Perhatikan bahwa meskipun font kustom tidak bekerja untuk ponsel pilih.
It's 2017 dan itu ADALAH mungkin untuk target tertentu, pilih pilihan. Di proyek saya, saya memiliki sebuah tabel dengan a class="variasi", dan pilih opsi ada di meja sel td="nilai", dan pilih memiliki ID pilih#pa_color. Pilihan elemen juga memiliki kelas pilihan="terpasang" (antara lain kelas kategori). Jika pengguna login sebagai pelanggan grosir, mereka dapat melihat semua pilihan warna. Tapi pelanggan ritel tidak diperbolehkan untuk pembelian 2 pilihan warna, jadi saya've keluarga mereka
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
Butuh sedikit logika, tapi di sini adalah bagaimana saya ditargetkan penyandang cacat pilih pilihan.
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
Dengan itu, saya pilihan warna hanya terlihat untuk pelanggan grosir.
Sebenarnya anda dapat menambahkan :before dan :after dan gaya mereka. Setidaknya itu's sesuatu
option{
font-size:18px;
background-color:#ffffff;
}
option:before{
content: ">";
font-size:20px;
display:none;
padding-right:10px;
padding-left:5px;
color:#fff;
}
option:hover:before{
display:inline;
}
Elemen ini diberikan oleh OS, bukan HTML. Hal ini tidak dapat ditata melalui CSS.
$(function() {
var clicky;
var t=0;
$(document).mousedown(function(e) {
clicky = $(e.target);
});
$(document).mouseup(function(e) {
clicky = null;
});
$("select").focusout(function(e) {
if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
$(this).parents().children("span.selected").html(clicky.html());
$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
}
$(this).parents().children("span.lists").html('');
});
$('select > option').text(function(i, text) {
var attr = $(this).attr('selected');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).parents().parents().children("span.selected").html(text);
}
});
$("select").focusin(function(){
$(this).children('option').text(function(i, text) {
$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
});
});
});
select {
width: 0px;
height: 0px;
overflow:hidden;
outline: none;
border: none;
appearance:none;
-moz-appearance: none;
}
label{
display: inline-block;
padding: 5px 10px;
position: relative;
width: 100px;
height: 20px;
background-color:#ccc;
}
label .selected{
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
label span.lists{
width: 100%;
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
box-shadow: 0px 0px 2px 0px #ccc;
background-color:#fff;
z-index: 9;
}
label span.item{
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="?" method="GET">
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test2">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2">item 2</option>
<option value="3" selected>item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<button>Submit</button>
</form>
</body>
</html>
coba ini dapat membantu anda
[ https://codepen.io/venu9l/pen/jeNXzY][1]
It's pasti akan bekerja.
Pilih opsi yang diberikan oleh OS tidak oleh html. Yang's whythe CSS style doesn't efek, umumnya..
option{font-size : nilai ; background-color:colorCode; border-radius:nilai; }
ini akan bekerja, tapi kita bisa't menyesuaikan padding, margin, dll..
Kode di bawah ini 100% bekerja untuk menyesuaikan pilih tag yang diambil dari contoh
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
<div class="custom-select" style="width:200px;">
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
</div>
Anda dapat menggunakan inline styles untuk menambahkan custome styling <option>
kategori.
Misalnya : <option style="font-weight:bold;color:#09D;">Opsi 1</option>
Ini akan menerapkan gaya tertentu <option>
elemen saja.
Maka anda dapat menggunakan sedikit javascript sihir untuk menerapkan inline styles untuk semua <option>
elemen-elemen dalam a <select>
tag seperti berikut :
var pilih = $(document).getElementById('#pilih-elemen-id')
var pilihan = pilih.anak-anak('#option-elemen-id')
pilihan.css('font-weight', 'bold')
pilihan.css('font-size', '24px')
Anda juga dapat menggunakan <option value="," keluarga> <br> </option>
untuk menambahkan line-break antara opsi.
Seperti dinyatakan di atas, tidak benar-benar mungkin; namun, jika anda hanya ingin gaya keadaan awal untuk sesuatu seperti 'Pilih Produk...' opsi sebelum pengguna berinteraksi dengan field, anda bisa melakukan sesuatu seperti di bawah ini -
Di bawah ini contoh gaya (secara teknis semua) pilihan pertama merah dan sekali pengguna berinteraksi akan menghapus opsi itu (yang memiliki nilai="defaultValue" set) dan menghapus kelas diterapkan untuk memilih. Anda dapat menerapkan pilihan lain selain warna juga, tetapi mereka hanya akan mempengaruhi lapangan setelah berubah, bukan tampilan daftar.
CSS
.default-value{
color: red;
}
jQuery
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});