Pertanyaan Bagaimana cara memilih opsi html “select”?


Inilah html saya:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Sekarang, yang saya inginkan adalah membuat nama produk (yaitu 'Produk1', 'Produk2', dll) tebal, dan kategorinya (yaitu. Elektronik, Olahraga, dll) dicetak miring, hanya menggunakan css. Saya menemukan pertanyaan serupa sekitar satu tahun, tetapi seperti yang disebutkan di sana, itu tidak mungkin menggunakan HTML dan CSS. Semoga ada solusi sekarang. Setiap petunjuk, permainan kata-kata atau tipuan akan dihargai. Terima kasih.


101
2017-08-26 18:02


asal


Jawaban:


Secara umum, Anda tidak bisa. Elemen ini diberikan oleh OS, bukan HTML. Tidak dapat ditata via CSS. Ada pengganti plug-in yang terlihat seperti <select> tetapi sebenarnya terdiri dari reguler HTML elemen itu BISA ditata.


106
2017-08-26 18:04



Tidak, itu tidak mungkin, karena styling untuk elemen-elemen ini ditangani oleh OS pengguna. MSDN akan menjawab pertanyaan Anda di sini:

Kecuali untuk background-color dan color, pengaturan gaya yang diterapkan melalui objek gaya untuk elemen opsi diabaikan.


44
2017-08-26 18:05



Anda dapat mengatur elemen opsi sampai batas tertentu.

Menggunakan tag * CSS Anda dapat memberi gaya pada opsi di dalam kotak yang digambar oleh sistem.

Contoh:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

Itu akan terlihat seperti ini:

enter image description here


21
2017-10-07 04:46



Saya menemukan dan menggunakan contoh yang bagus untuk menata pilihan dan opsi. Anda dapat melakukannya dengan memilih semua yang Anda inginkan. Berikut adalah Biola

html

<select id="selectbox1">
    <option value="">Select an option&hellip;</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&hellip;</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();
    });

});

18
2017-12-16 21:30



EDIT: Saya menemukan pustaka mengagumkan ini yang menggantikan elemen "pilih" standar dalam HTML dengan elemen "pilih" yang menakjubkan: Pilih2 - https://select2.github.io/examples.html 


Pada tahun 2011, Anda mungkin belum dapat memilih elemen "opsi" pilihan, tetapi tahun 2015! Anda benar-benar bisa gaya itu! Saya tidak mengerti beberapa jawaban dari tahun 2014 yang mengatakan Anda tidak bisa menata! CSS3 menghasilkan keajaiban. Saya mencoba ini dalam kode saya sendiri, dan pull down "opsi" ditata seperti bagaimana Anda akan memberi gaya "pilih"

http://cssdeck.com/labs/styling-select-box-with-css3

Berikut beberapa contoh kode!

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: black;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

4
2018-02-11 23:55



Bekerja untuk saya:

.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>


4
2018-04-28 12:24



Seperti telah disebutkan, satu-satunya cara adalah dengan menggunakan plugin yang menggantikan <select> fungsionalitas.

Daftar plugin jQuery: http://plugins.jquery.com/tag/select/ 

Lihatlah contoh menggunakan Select2 plugin: http://jsfiddle.net/swsLokfj/23/


2
2018-01-13 11:18



Bootstrap memungkinkan Anda untuk menggunakan styling melalui konten data:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Contoh: https://silviomoreto.github.io/bootstrap-select/examples/


2
2017-11-17 17:29