How do i style

Question

Is there any easy way to style <option> tag after <select> without javascript? i tried to add class or another tag in it.

<option><span>&nbsp;</span><option> OR
<option><lable class="padding">&nbsp;</lable><option>

it doesn't show any tags. i'm trying to put some padding for option text. Please suggest.

Sadly it's not that easy. I usually use some Dropdown replacements where you can write normal ` — lumio, Jun 26 '17 at 00:31
https://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css — , Jun 26 '17 at 00:34
You don't. Use something like this https://select2.github.io/ — Michael Coker, Jun 26 '17 at 01:08
Don't. Not everyone uses the same sort of input. How that select box looks isn't up to you, it's up to the browser. Your responsibility ends with some basic CSS suggestions about size, font, and color. Don't think you're getting away with custom implementations (like the suggested Select2) either. These are garbage, and they break down pretty quickly as soon as someone uses an alternative input device. (By the way, mobile browsers in particular override these things.) Don't do it. — Brad, Jun 26 '17 at 02:13

Ehsan · Accepted Answer · 2017-06-26T03:48:09.037

Without javascript if not be impossible else is very hard , i create a custom select element, I hope help you.

$(document).ready(function(){
    $('.sel>span').click(function(){
        $('.sub').toggle();
    })

    $('.sub div').click(function(){
        $('.sel .content').text($(this).text());
        $('.sub').hide();
    })
})

.sel {
    display: inline-block;
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
    padding-left: 40px;
    box-sizing: border-box;
}

.sel > .arrow{
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: none;
}

.sub {
    position: absolute;
    border: 1px solid #ccc;
    display: inline-block;
    width: 200px;
    left: -1px;
    top: 19px;
    box-sizing: border-box;
    display: none;
    cursor: pointer;
}

.content {
    color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="sel">
  <span class="arrow">&#9662;</span>
  <span class="content"></span>
  <div class="sub">
    <div>&nbsp;</div>
    <div>Orange</div>
    <div>Blue</div>
    <div>Red</div>
  </div>
</div>

score 0 · Answer 2 · answered Jun 26 '17 at 01:28

Building your own dropdown is easier than trying to style the existing one.

Take a look at Bootstrap or these links:

https://semantic-ui.com/modules/dropdown.html#/examples

https://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

Or use Google for that matter

How do i style tag without JavaScript?

2 Answers2

How do i style