3

I have to remove background of selectbox, I have used code like this

<select style="background:none;border:none">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

But In the output arrow appeared.How can I hide that arrow.

Chriz.Khoiran
  • 33
  • 1
  • 4
  • 1
    Then how do users know that it is a `dropdown`? – Priyank Patel Nov 08 '12 at 09:58
  • 1
    possible duplicate of [How to remove the arrow from a – Curtis Nov 08 '12 at 10:03

2 Answers2

1

Add -webkit-appearance:none

<select style="background:none;border:none; -webkit-appearance:none">

or add div around and give max width.

<div style="width:80px; overflow:hidden">
<select style="background:none;border:none; width:97px">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>

Updated DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • 1
    @Sowmya Why would you use `inline` styles? – Priyank Patel Nov 08 '12 at 09:56
  • It is not working properly,I did only for sample that's why I used in line styles – Chriz.Khoiran Nov 08 '12 at 09:58
  • 1
    @freebird that is only for sample. I hope he knows to add it to style sheet when developing – Sowmya Nov 08 '12 at 09:59
  • @SowmyaShivaram Ya that is true but some might just use them as stated in answer. – Priyank Patel Nov 08 '12 at 10:00
  • 1
    @freebird sry I dnt wanna argue unnecessarily – Sowmya Nov 08 '12 at 10:01
  • @freebird: Most likely because the OP used inline styles. Pushing the styles into a stylesheet and getting them to add a class/ID could confuse him/her. While I understand inline styles aren't exactly best practice, standards aren't really covered by the scope of his question. – Beardy Nov 08 '12 at 10:01
  • Ya I always used stylesheet while working, Here if I increase width from 13px to 80px it is not working properly. – Chriz.Khoiran Nov 08 '12 at 10:04
  • your outer div width should be 20-25px lesser than the select tag width so that the overflow width of the select will be hidden by the outer div. – Sowmya Nov 08 '12 at 10:06
  • we should not use inline styling that will increase are markup of the page so always try to make the code simple neat & clean with minimum markup for styling you have style-sheet file you can do over-there whatever you wants to do – Shailender Arora Nov 08 '12 at 10:08
  • @Sowmya I got my requirement from your suggestion.(Thank You) – Chriz.Khoiran Nov 08 '12 at 10:14
0

Make select width more than 100% and apply overflow:hidden

select {
    overflow:hidden;
    width: 120%;
}

See this link and the 2nd answer seems more what you are after!

How to remove the arrow from a select element in Firefox

Community
  • 1
  • 1
topcat3
  • 2,561
  • 6
  • 33
  • 57