How to set the options of a selectbox in horizontal direction HTML/CSS

Question

So if the question is unclear, here a sketch of what I want. I couldn't find a similar question regarding this matter so that's why I'm asking.

I want it to be as simple as possible and css-only.

<div class="myselectbox">My Selectbox
  <select class="myselect_class" id="myselect_id">
    <option>OPT1</option>
    <option>OPT2</option>
    <option>OPT3</option>
    <option>OPT4</option>
  </select>
</div>

Thanks in advance

Instead of native `select`, use `ul li` structure to mimic `select` and style it like whatever you want. — Mohammad Usman, Jan 12 '18 at 10:33
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) — Mohammad Usman, Jan 12 '18 at 10:34

score 0 · Answer 1 · answered Jan 12 '18 at 10:40

0

you just need to put in your display settings under css. As the default display is of block section. so the CSS code change you need to do is as follow:

.myselect_class{
   display: inline-block;
 }

answered Jan 12 '18 at 10:40

Hemant Arora

61
10

score 0 · Answer 2 · answered Jan 12 '18 at 10:42

Try this:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1float;}
.dropdown-content a {float: left;}

.dropdown:hover .dropdown-content {
    display: inline;
 
}
a{
float: left;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Select</button>
  <div class="dropdown-content" style="left:0;">
  <div>
   <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
   
  </div>
</div>

you can't do it with <select>, you need to do like a custom dropdown

Is it really not possible to do it with `select`? You're example is not bad, but I want the options to be displayed directly on the side of the selectbox. — YTZ, Jan 12 '18 at 10:56

How to set the options of a selectbox in horizontal direction HTML/CSS

2 Answers2