CSS personalized drop-down box and button

Recently, I am working on an education platform website. There are several issues that have not been encountered before.
First, the background image of input is resolved as follows:
. Loginbtn
{
Width: 29px;
Height: 24px;
Border: 0px;/* set the border to 0 */
Background-color: transparent;/* set the background color to transparent */
Background-image: URL (../images/zxcs_go.png);/* change to your own background */
}
Second, personality drop-down box. Solution:
First, two images are required. One is the background frame and the other is the arrow.
The HTML code is as follows:
<Span id = "slebg">
<Span id = "slehid">
<Select name = "select" size = "1" id = "select" class = "xialaliebiao">
<Option value = "Zhang San"> Zhang San </option>
<Option value = "Li Si"> Li Si </option>
</SELECT>
</Span>
</Span>
The CSS code is as follows:
. Xialaliebiao
{
Width: 160px;
Height: 21px;
Background: none;
Border: none;
Padding-top: 3px;
Background-color: transparent;
}
# Slehid
{
Display: block;
Width: 134px;
Height: 18px;
Overflow: hidden;
Position: relative;/* solves IE6 and 7 compatibility issues */
Top: 2px;/* solve IE6 and 7 compatibility issues */
Left: 2px;/* solve IE6 and 7 compatibility issues */
 
}
# Slebg
{
Width: 160px;
Height: 24px;
Background: URL (../images/ddl_bg1.png) No-Repeat;
Display: inline-block;
Height: 24px;
Position: relative;
}
Explanations:
The principle is to add two spans to the outer layer of the SELECT statement. First, set the first span. The width is greater than the width of the SELECT statement. Add the drop-down arrow style to the background of the selected span, then add the second span, whose width is smaller than the select width. The key is to set its overflow width and hide the select drop-down arrow.
The advantage is that the setting is simple, and the disadvantage is that if you do not have JavaScript to simulate Mouse clicking, the drop-down arrow can only play a decorative role.
You can use this method if you want to be nice and have little code.
Note:
When we use overflow: hidden;, you will find that this attribute only works under ff and IE8. What should we do under IE6 and 7? Simply add position: relative. Add top and left as needed to solve the problem perfectly.

Third, the scroll bar problem.
CSS custom scroll bar:
Scrollbar-arrow-color: color;/* color of the triangle arrow */
Scrollbar-face-color: color;/* color of the three-dimensional scroll bar (including the background color of the arrow )*/
Scrollbar-3dlight-color: color;/* color of the bright side of the stereo scroll bar */
Scrollbar-Highlight-color: color;/* The highlighted color of the scroll bar (left shadow ?) */
Scrollbar-shadow-color: color;/* color of the shadow of the three-dimensional scroll bar */
Scrollbar-darkshadow-color: color;/* color of the Shadow outside the three-dimensional scroll bar */
Scrollbar-track-color: color;/* stereo scroll bar background color */
Scrollbar-base-color: color;/* base color of the scroll bar */

You can also define cursor: hand; to define the mouse gesture of the scroll bar. By the way, FF does not support cursor: hand; the standard writing method is cursor: pointer;
However, it should be emphasized that these are only applicable to IE browsers, and FF does not support them at all.