自定义 input、textarea、secelt、input[type="button"] 样式

1. input 和 textare 的效果一样，分为 静态样式、hover 样式 和 focus 样式

• 静态样式

input ,textarea {
    height: 24px;
    border-radius: 2px;
    padding: 3px;
    border: 1px solid #C6C6C6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
}

效果图：

static style

• hover 样式

input:hover ,textarea:hover {
   border: 1px solid #C6C6C6;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   color: #333333;
}

效果图：

hover style

• focus 样式

input:focus, textarea:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
    outline: none; /* 讨人厌的默认 outline 蓝色轮廓*/
}

效果图：

focus style

2. select 样式

select {
    width: 100px;
    height: 30px;
    outline: none;
    background: white;
    border-radius: 2px;
}

效果图：

select style

3. input[type="button"] 样式

input[type="button"] {
    user-select: none;
    background-color: rgba(231, 201, 154, 0.5);
    border: 1px solid rgba(231, 201, 154, 0.1);
    border-radius: 5px;
    height: 35px;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    line-height: 27px;
    padding: 0 10px;
}

input[type="button"]:hover {
    background-color: rgba(231, 201, 154, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

input[type="button"]:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

效果图：

static style

hover style

focus style