change default select dropdown look and feel

Question

let's see I have a select:

<select class="selectpicker">
  <option selected> A </option>
  <option> B </option>
  <option> C </option>
</select>

How would you change the look and feel of the items displayed in the dropdown when viewing the options?

My gut feeling is that you would hide the default options and populate a new list using your own css or/and javascript?

Going from the default style like this: Click on link to view:

To a nice look like this: Click on the link to view

You would just target the `option` tag with CSS: `option { color: red; }` for example. Or are you specifically asking about the **selected** option? — Obsidian Age, Jun 29 '18 at 03:33
No, the original box/container looks very primitive, so currently looking SemanticUI and see how they customised their select dropdown. Looks like it's a combination of javascript and CSS.https://semantic-ui.com/modules/dropdown.html — blackmamba24, Jun 29 '18 at 03:45
Looks like this is not possible just with css. This question has already been [answered](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select/). — RamY, Jun 29 '18 at 04:08
Possible duplicate of [How to style the option of a html "select"?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) — RamY, Jun 29 '18 at 04:08
The issue you're going to run into is that every single browser applies their own unique styles to elements. So if you really want to customize it, you'll likely have to create your own custom drop down menu with `divs` or something — oldboy, Jun 29 '18 at 04:24

score 0 · Answer 1 · answered Jun 29 '18 at 04:45

jQuery

$(document).ready(function(e){

$(".DropdownWrapper").focusin(function(e){

    $(".Dropdown").css('display', 'block');

});

$(".Item").click(function(e){

    var val = $(this).text();

    $(".Textfield").val(val);

    $(".Dropdown").css('display', 'none');

});

});

HTML

<div class="Content">

<h1>Custom Dropdown Menu For a Textfield By Farris</h1>

<div class="DropdownWrapper">
    <input type="text" class="Textfield" placeholder="Animal" />
    <div class="Dropdown">
        <div class="Item">Lion</div>
        <div class="Item">Cat</div>
        <div class="Item">Dog</div>
        <div class="Item">Monkey</div>
    </div>
</div>

</div>

CSS

body{
    background-color: #222;
    color: #FFF;
    font-family: sans-serif;
    margin: 0px;
}

.Content{
    width: 800px;
    height: auto;
    overflow: visible;
    margin: 30px auto;
}

.Textfield{
    width: 220px;
    height: 20px;
    background-color: #111;
    color: #FFF;
    font-family: sans-serif;
    padding: 15px;
    border: none;
    outline: none;
    border-radius: 3px;
}

.DropdownWrapper{
    width: 250px;
    height: 50px;
    position: relative;
    margin-bottom: 10px;
}

.Dropdown{
    position: absolute;
    top: 50px;
    left: 0px;
    width: 250px;
    height: auto;
    overflow: visible;
    z-index: 1;
    display: none;
}

.Item{
    width: 220px;
    height: 20px;
    padding: 15px;
    color: #CCC;
    background-color: #111;
}

.Item:hover{
    background-color: #000;
    cursor: pointer;
    color: #FFF;
}

This snippet will work on textfields and buttons

Thanks @FarrisFahad. Just wondering though. When would someone prefer a dropdown vs select or vice versa? Select statement gives better experience on mobile and other tablets I think. — blackmamba24, Jun 29 '18 at 04:53
@blackmamba24 I agree. Select is much better on mobile. But unfortunately you can't style the select and option tags. You could load depending on device though. — FarrisFahad, Jun 29 '18 at 05:12

change default select dropdown look and feel

1 Answers1