Specific steps：
1. Implemented with margin property. Set the margin property to-2 to hide the original border of the Select object, and then set the border of the parent object for the Select object.
<span style= "border:1px solid #333333; width:80" >
<select style= "Margin:-2;width:84;background: #eeeeee" >
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
</select>
</span>
The 2.margin attribute is implemented in conjunction with the clip property. It is also the first to hide the original border of the select with margin, and then use clip to control the viewable area of the Select to completely hide the original border of the Select, and finally the border of the last-seen select by defining the border of the parent object of the Select.
<span style= "position:absolute;border:1px solid #333333;
Width:80;height:20 ">
<select style= "Position:absolute;clip:rect (2 2); margin:-2;
Width:84;background: #eeeeee ">
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
</select>
</span>
Note: The position property of the span and select elements must be set to absolute in Method 2.
Special Tips
In this case, the operation of the two pieces of code as shown in Figure 2.1.6.6 and figure 2.1.6.7, careful contrast, you can find some small differences.
Figure 2.1.6.6 defines the border effect of a select
Figure 2.1.6.7 defines the border effect of a select two
Special Notes
This example is primarily an application of the clip property and the Margint attribute, because the select control's specificity makes it impossible to define its border style directly, so you must master the techniques used in this example.
