CSS Modify drop-down list select default Style instance

Some of the default styles of select are difficult for us to modify and replace with the label. Now let's talk about how to modify these default styles, I hope this article can help everyone.

Add parent element p to select to overwrite the Select style with the style of P.

CSS code:

        p{//Use the style of p to replace the style of select width:200px;            height:40px;            border-radius:5px;            The box shade modifies the function, oneself arbitrarily box-shadow:0 0 5px #ccc;        position:relative;            } select{//Clear the Border style of select Border:none;            Clears the border color of the select focus time Outline:none;            The width height of the select is equal to the width height of p width:100%;            height:40px;            line-height:40px;            Hides the drop-down icon for select Appearance:none;            -webkit-appearance:none;            -moz-appearance:none;        The text is centered padding-left:60px by padding-left value;            }//Use Pseudo-class to add to select the icon you want to use p:after{content: "";            width:14px;            height:8px;            Background:url (img/xiala.png) no-repeat Center;            Place the icon in the appropriate position by positioning Position:absolute;            right:20px;            top:45%; To customize the icon to achieve the click Down function pointer-events:nOne }

Some of the default styles of the

Select are difficult for us to modify, and replace the labels. Now let's talk about how to modify these default styles: HTML code: