Remove or modify the default style for forms such as input, select, and so on

Hide the background of the default style for forms such as input:

Textarea,select,input{-webkit-appearance:none;-moz-appearance:none;-o-appearance:none; appearance:none;}

Make the div look like a button:

Div
{
Appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}

Using CSS to create a custom select (non-analog) implementation principle and style

Reviews : Use Appearance:none to remove the default style for select, with gradient, background-size,background-position, and custom styles, You can use your imagination to make a beautiful select implementation principle is simple :
1, use Appearance:none to remove the default style of select;
2, with the use of gradient, background-size,background-position, spelling out the defined style
I define the style and the default style of the browser does not make much difference, mainly simple implementation, we can play the imagination to make a beautiful select.

implement CSS as follows :

The code is as follows:

select{ 
margin:0; 
padding:0; 
outline:none; 
height:25px; 
line-height:25px; 
width:120px; 
Border:rgb (191, 204, 1px) solid; 
border-radius:3px;& nbsp
display:inline-block; 
font:normal 12px/25px "Microsoft Jas Black", "SimSun", "Song Body", "Arial";  
Background-size: 5px 5px,5px 5px,25px 25px,1px 25px; 
 
Background-image:repeating-linear-gradient (225deg,rgb ( 105,123,149) 0%,rgb (105,123,149) 50%,transparent 50%,transparent 100%),  
Repeating-linear-gradient (135deg, RGB (105,123,149) 0%,rgb (105,123,149) 50%,transparent 50%,transparent 100%),  
Linear-gradient (#FFFFFF 0%,# F8F9FD, #EFFAFA 100%),  
Repeating-linear-gradient (RGB (191, 204, up) 0%,rgb (191, 204, 220) 100%);  
background-repeat:no-repeat; 
background-position:101px 10px,106px 10px,right top,92px Top ;  
-webkit-appearance:none 

There are several ways to change the Select style:

(1) If you just want to remove the drop-down arrow of SELECT, you can use CSS style clip:rect (x x x ×) to select the drop-down arrow part of the direct intercept

Off. But the problem with this approach is that if you set the border of a select, the interception will also intercept the border, which is very unattractive.

(2) There is also a way to use a lot of css2.0 time, is to use DIV+CSS to simulate the interface of select, the advantage of this way is to

To make a variety of very beautiful select drop-down boxes, but the disadvantage is that you need to use JavaScript to implement the actual function of select.

(3) It is relatively easy to make a slightly prettier select under CSS3 because the Border-image attribute is added under CSS3 and can be set

Frame, and this property is useful for select, such as this style of select:

is not a lot more than the system comes with the select style, but also can make a variety of beautiful style, and do not need to use JavaScript to simulate

The function of select is not very good ah!

You need to know about Border-image before using this method to modify the interface of select.

syntax: border-image: URL area type

Parameters: The URL represents the path to the picture

Area is the picture display region, below with a picture to explain the more convenient (too lazy to draw, put a picture of others)

For example, Border-image:url ("Bord3.png") 10 15 20 25 The graph means the picture below.

This thing is said to be called nine Gongge, I do not know what is a thing, just to facilitate the understanding of border-image.

However, it is also necessary to remind that although Border-image:url ("Bord3.png") 10 15 20 25; The default units are pixel px,

However, in the actual use is not with PX, you can use the percentage

The type means that some pictures show a style with three values: Stretch extrude (default) repeat (repeat) round (tiled)

There are two directions: horizontal and vertical (do not reverse the order).

Eg:border-image:url ("Bord3.png"), stretch stretch; the horizontal and vertical directions are stretched

I also have articles about Border-image's understanding.

Specific implementation methods:

Provide a picture for border-image bord3.png

<select id= ' sel ' >

<option> option one </option> <option> option two </option><option> option three </option>

</select>

#sel {

-webkit-border-radius:5px; -moz-border-radius:5px;

border-width:0px 21px 0px 5px;

-webkit-border-image:url ("Bord3.png") 0 21 0 5; -moz-border-image:url ("Bord3.png") 0 0 5px;

}

(4) There is also a way to modify the style of a select, but still retains the function of select. In fact, this method is also very ingenious, his principle is

Add a Select drop-down list to a link, then set Select to Transparent, place the select in the link in a transparent form, and click on the link

Trigger the click of Select.

Implementation method:

<a href= "javascript:void (0)" class= "Selouter" >

<select class= "SEL" >

<option > Options One </option><option> option two </option>

</select>

</a>

. Selouter{position:relative;width:100px;height:35px;background:url ("Bord3.png");d Isplay:inline-block;}

. Selouter select{top:0px;left:0px;position:absolute;width:100px;height:35px;opacity:0;}

What is necessary here is to set the outer link a-style position:relative, because only after the outer layer is set relative, the inner select can be positioned as a datum instead of the body. Select must be set to position:absolute;top:0px;left:0px; The main purpose is to have the select filled

The entire area of the link, set Display:inline-block to set its width, otherwise it is not possible to set the width and height of the inline element in a nonstandard state.

Remove or modify the default style for forms such as input, select, and so on