how to make my select dropbox looks pretty?

Question

<div>
    <label for="vehicie_type">Vehicie Type:</label>
    <select id="vehicie_type">
      <option>11111</option>
      <option>22222</option>
      <option>33333</option>
    </select>
  </div>
  <div>
    <label for="cc">CC:</label>
    <select id="cc">
      <option>11111</option>
      <option>22222</option>
      <option>33333</option>
    </select>
  </div>

How can I make my select dropbox looks like the picture below? What I want is the text and select box on different side and looks orderly.

enter image description here

Please review [**How to ask**](http://stackoverflow.com/help/how-to-ask) questions on Stack Overflow and what types of questions [**can be asked**](http://stackoverflow.com/help/on-topic) and what types [**should be avoided.**](http://stackoverflow.com/help/dont-ask) — Paulie_D, Jul 09 '15 at 09:26
Possible duplicate - http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box — Paulie_D, Jul 09 '15 at 09:34

score 0 · Answer 1 · answered Jul 09 '15 at 09:26

Since you didn't post anything about your css.. something like this?

label {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-top: 20px;
}
select {
  border: 2px solid #333;
  display: inline-block;
  border-radius: 5px;
  width: 200px;
  color: #ccc;
  height: 30px;
  line-height: 30px;
}

<div>
  <label for="vehicie_type">Vehicie Type:</label>
  <select id="vehicie_type">
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
  </select>
</div>
<div>
  <label for="cc">CC:</label>
  <select id="cc">
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
  </select>
</div>

score 0 · Answer 2 · answered Jul 09 '15 at 09:30

0

This is what I came up with:

select{
    border-radius: 8px;
    border: 2px solid gray;
    height: 25px;
    color: gray;
}

JSFiddle demo here

answered Jul 09 '15 at 09:30

Ahs N

8,233
1
28
33

how to make my select dropbox looks pretty?

2 Answers2