site logo

How to remove border in select element

One problem of select element is its border property in browsers IE6 and IE7. There are no possibilities how to remove border, change color of border, or change the width of border by help of CSS. Because I found in log a lot of queries on border removing of this element, I offer perhaps original solution. My target was to remove original border and add new one, which is uder control of designer. On the right side are examples of new border element styling. Solution that works in IE and in all standard browsers too.

Fortunately there is light future, IE8 RC1 is able to work with border property of select element as expected (but IE8 beta did not work), and for that browser such solution is not neccessary.

In the first line of examples is naked select element, border free. It is clear, that looks a bit unnaturally.

The second sample is the same, this time bordered select element. Border is created by element div, whose border is fully under control.

The third live sample of element select is bordered by the help of container block background color.

Attention, described solution is rather experimental than universal, if you are going to use that, be carefull. It was not tested on Mac nor Linux systems. On the other side, intranet, where used browsers are under your control is suitable environment for experiment.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
...

<style type="text/css">
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.container {
  border: 0;
  position: relative; width: 124px; height: 18px; overflow: hidden;
}
.inpSelect {
  color: black; background: #ffa;
  position: absolute; width: 128px; top: -2px; left: -2px;
}
</style>

<body>
...
<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">actual browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
...
</body>

CSS code comes from similar principle like cut off long text in table cell. Element select is inclosed into the container, which has set-up style property overflow: hidden;. At this time property position: relative; is set-up for container also. Element select has set-up property position: absolute; and element is shifted up and left so that the border is placed behind the margin of container and by that falls invisible. On the contrary select "open" button must stay entire visible.

There is left to tune up the dimensions of select element and its container and shift select element so that border of select element was hidden symmetric. The width of select border is 2 pixels in default display, therefore the width and the height of container is in sum 4 pixel less than outside dimensions of element select. In the end element select is shifted 2 pixels up and left.

Width of container comes from layout of form, its height is given by font used in select element. Therefore this way of element select border removal fits only for fixed font size.

In class .container property border: 0; is set-up because container is inserted into table, and table ensures form layout and form border. When another type of layout is used, border of container can be set-up as e.g. borer: 1px solid #999;. Do not forget to calculate correct proportions of container in agreement with W3C box model. Proportions of select element are calculated according to traditional box model as is described in article box model of form elements.

Similar effect can be achieved by using property position: absolute; clip: rect(top right bottom left); for select element, but space after border removal stays empty. Again it is necessary to shift entire element left up. Next possibility is using iframe as container.

Known problems

Introduced solution requires design in pixel accuracy. Afterwards it is impossible to change font size used in element select and both container and element select must have fixed dimensions. Font used in form elements is not inherited, therefore font have to be declared separately for select element.

Browser FireFox 2 perhaps containes bug, when height definition is done by the help of CSS rendered real height of element is 2 pixel higher. As a result of this bug lower part of element's button is not rendered. In FireFox version 3 is already this defect eliminated and complete button is rendered.

It is impossible to use this solution for opened select, it means when attribute size of element select is used. Size indicates how many lines of element select are permanent visible. Scrrenshots in past article indicated that it is impossible to achieve uniform proportion for unpacked select. Therefore it is impossible to apply this method for rolled out element.

At the end of past article was published screenshot indicating incorrect overlaying of select element in IE6 browser. Described method of border removal causes, that similar fault appears also in other browsers thanks position absolute. Absolute elements flow always up, above the page content. When design layout requires overlaying by dynamic elements, these elements must be positioned also absolute. Only then it is possible to set correct overlaying by the help of property z-index. In browser IE6 though overlaying fault continues.

updated 02.02.2009