Beautify code instances from the select drop-down menu and select drop-down menu

Beautify code instances from the select drop-down menu and select drop-down menu

Beautification code example from the select drop-down menu:
The built-in select drop-down menu is not very nice and is not easy to beautify. Of course, we can simulate the select drop-down menu, but the code is slightly complicated, however, you can also achieve this through simple CSS. The following is a brief introduction through examples.
The Code is as follows:

<! DOCTYPE html> 
The above code realizes the beautification effect of the select drop-down box. Of course, it is not beautiful here, because here we only introduce its implementation principles for transformation, the following describes the implementation process:
Implementation principle:
In fact, the downward arrow is the most painful place to beautify the select drop-down menu. Here we set a div outside the select drop-down menu, and the div width is less than the width of the select drop-down menu, in this way, the arrow of the select menu is blocked, and a background image is set as the drop-down arrow for the next div to achieve the desired effect.
Original address: http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2130.html