Padding not working for SELECT OPTION in IE11

Question

~I have created listbox control and trying to add padding between options, It is working with chrome but not working with IE11, Anyone can suggest what I am doing wrong.I need to place items in the listbox with line spacing. Below code contains style sheet I am using and HTML code which has select options tag, Tried styles with padding, margin, line space etc but no luck.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>change demo</title> <style> div { color: red; } </style> <style type="text/css"> select::-ms-expand { /* for IE 11 */ display: none; } .ListBox { background-color: transparent; font-family: verdana; font-size: 8pt; font-weight: bold; color: black; vertical-align:middle; } .ListBox option { padding:30px 30px 30px 30px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } } } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <select name="sweets" multiple="multiple" class="ListBox"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <option>Cookie</option> </select> <div></div> <script> $( "select" ) .change(function () { var str = ""; $( "select option:selected" ).each(function() { str += $( this ).text() + " "; }); $( "div" ).text( str ); }) .change(); </script> </body> </html>

Answer 1

Just found this

select::-ms-expand { /* for IE 11 */
    display: none;
}

here:

How to style the <option> with only CSS?

Padding not working for SELECT OPTION in IE11

Question

1 answers

solution1
0 2016-07-10 06:58:05

Padding not working for SELECT OPTION in IE11

Question

1 answers

solution1 0 2016-07-10 06:58:05

solution1
0 2016-07-10 06:58:05