Changing combobox design

Question

I have tried changing border color and background in css of the combobox but it's not working:

I have this HTML code:

<select class = "form-control" style = "border:2px solid white;background:skyblue">
   <option value = "newest"> Newest </option>
   <option value = "oldest"> Oldest </option>
</select>

I just simply want to:

Remove combobox border
Remove the arrow of the combobox
Set the background of combobox to skyblue.

I'm sorry if I could not attach any picture for SO requires me to have atleast 10 repu for me to post picture. Please help me with this one. Thanks

UPDATE: I also tried the btn-info in bootstrap but still doesn't work..

just add as link / share url of image, i ll attach the image for you.. — G.L.P, Sep 08 '15 at 12:01
Possible duplicate - http://stackoverflow.com/questions/11118491/style-select-option-using-css — Paulie_D, Sep 08 '15 at 12:10

score 0 · Answer 1 · answered Sep 08 '15 at 12:12

0

Done.
You can do this, in webkit browsers only.
Done.

If you want to style your combobox better, you have to write some code or useing a plugin like: select2

select {
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:skyblue;
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

answered Sep 08 '15 at 12:12

Mosh Feu

28,354
16
88
135

Thanks for this one also :) – Sep 08 '15 at 12:45
Sorry can't upvote, due to lack of repu. – Sep 08 '15 at 12:52

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

Try this

get Help

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: none;
  border: 2px solid #fff;
  background:skyblue
  
}

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Newest</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Oldest</option>
  </select>
</div>

edited May 23 '17 at 10:27

Community

1
1

answered Sep 08 '15 at 12:17

Kishan

1,182
12
26

Thanks to this one, it really worked fine now :) – Sep 08 '15 at 12:45
Sorry can't upvote, due to lack of repu. – Sep 08 '15 at 12:52

Changing combobox design

2 Answers2