There is a drop-down list and you need to set indents, the upper limit for only one item from the entire list. Assigned a class, only the background works. I set the border, indents, nothing is displayed.

.non-eu { background:#ccc; border-top:1px solid red; padding-top:10px; } 
 <select> <option>Select Your country...</option> <option>Albania</option> <option>Austria</option> <option>Belgium</option> <option>Bosnia And Herzegovina</option> <option class="non-eu">Non-EU</option> </select>

How can you solve?

    1 answer 1

    By default, the drop-down list in the select is rendered by the operating system. This allows, for example, on mobile devices to display a select list instead of an on-screen keyboard.

    Through CSS, you can only stylize the standard select field itself, the list is impossible.

    However, you can connect the js-library for select. For example, select2 . It replaces the standard input-select with its implementation, and it can be styled in CSS.

    In version 4.0 select2 - a separate option is styled as follows:

     function template(result, container) { var option_class = $(result.element).attr('class'); if (option_class) { $(container).addClass(option_class); } return result.text; }; $(document).bind('ready', function() { $('.js-select2').select2({ templateResult: template }); });

    In the template function, we check if the standard option set for the standard option for the select, and, if so, apply this class to the select2 option.