asked on

CSS - Select box and its border.

Hello,
I've been searching for a way to disable the select box (<SELECT>) border. I succeed to remove input text borders using "border: 0px solid;" but it seems it doesn't work with SELECT BOX. If its not possible, I'd like to know if anyone knows a workaround to remove them.

Thanks,
RODRIGO.

Daydreams

You cannot change the border of the select box at this time. You can style other aspects of <select>, such as color of the text and background-color, but not the border.

seanpowell

Well you can change the color - in NS7 and Mozilla - but that's it for now...

lirageneve

ASKER

Isnt there any workaround ?

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lirageneve

ASKER

Very nice. thanks for your help.

seanpowell

You're welcome, and best of luck with the project!

Thanks,
seanpowell

melaniejcook

You could actually make the border simply 1px solid with the same colour as the bg of the page and the select box.

Even though it would techinically still have a border, it wouldn't appear visibly to have one.

seanpowell

That won't work I'm afraid... you can't alter the select box border.

Daydreams

melaniejcook, that's why I said this: http:Q_20828322.html#9957719 and seanpowell said that: http:Q_20828322.html#9957989

razluc

so, you finally did it? how? the original code has errors ! do you have the code?

Jaymol

Just thought I'd append this suggestion to this post as I think it's worth considering for anyone that finds this page, as I did, by searching for a solution to the same problem. This is not 100% perfect and could be tweaked to look better, but the idea is certainly there......

<div style="position:absolute;top:100px;left:150px;width:400px;height:300px;border-style:solid;border-width:1px;overflow:hidden;">
<select size="12" style="position:absolute;width:406px;height:310px;top:-4px;left:-3px;">
<option>This is option 1</option>
<option>This is option 2</option>
<option>This is option 3</option>
<option>This is option 4</option>
<option>This is option 5</option>
<option>This is option 6</option>
<option>This is option 7</option>
<option>This is option 8</option>
<option>This is option 9</option>
<option>This is option 10</option>
<option>This is option 11</option>
<option>This is option 12</option>
<option>This is option 13</option>
<option>This is option 14</option>
<option>This is option 15</option>
<option>This is option 16</option>
<option>This is option 17</option>
<option>This is option 18</option>
<option>This is option 19</option>
<option>This is option 20</option>
<option>This is option 21</option>
<option>This is option 22</option>
<option>This is option 23</option>
<option>This is option 24</option>
<option>This is option 25</option>
<option>This is option 26</option>
<option>This is option 27</option>
</select>
</div>

Hope this is useful to people.

John.

mihaimm

This is indeed a very good idea. The only problem I find is having different, apriori unknown, heights/widths for the widget. If only they could be specified in %s...

Jaymol

Heh - well we know the answer to that, don't we! Dreaded JavaScript.

Unfortunately, unless you can specifiy the height and width of the <select>, you're right. I've not seen anything, other than JavaScript, that will do this. Also, it obviously doesn't work if it's a drop-down style select.

I think we'll have to wait for a foolproof answer to this, and it'll probably be supplied by browser vendors, not us developers.

Glad it's proved useful for someone though.

John.