Define the select border color

 Procedure:
1. Use the margin attribute. First, set the margin attribute to-2 to hide the original border of the select object, and then set the border of the parent object of 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>

2. The margin attribute is implemented in combination with the clip attribute. It also uses margin to hide the original border of the select statement, and clip to control the visible area of the select statement to completely hide the original border of the select statement, finally, the border of the select parent object is defined as the border of the select object.

<Span style = "position: absolute; border: 1px solid #333333;
Width: 80; height: 20 ">
<Select style = "position: absolute; clip: rect (2 80 20 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: In method 2, the position attribute of the SPAN and SELECT elements must be set to absolute.
Note
In this example, the running effects of the two sections of code are shown in 2.1.6.6 and 2.1.6.7 respectively. By careful comparison, we can find some minor differences.

Figure 2.1.6.6 define SELECT border effect 1

Figure 2.1.6.7 define the SELECT border effect 2

Note
This example mainly applies the clip and margint attributes. Because of the special nature of the SELECT control, the border style cannot be directly defined. Therefore, you must master the skills used in this example.