How to make Css Custom Select Box |Best css and jquery tutorials

Simple tutorial of making Css Custom Select Box with diffrent colors and themes acording to website themes. This is pure css3 code for your selectbox to look good and stylish. Copy any of selectbox class and paste in your website and you may also customize the look and feel of these select boxes.
How to make Css Custom Select Box

CSS Code

.selectbox1 {
    border: 1px solid #ccc;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYPpkMKsz66mOAe1oRrWZ1_QjwzpnPBJztK2gU2U0fmusAWt7gdU1B22txhZ89b9IDnnXyMlYuA7WPkgYqHv9agyLULQ5NCTzJPSYN6awtR7tvqX6_5ZQSMm0DH0Y21f90uyve_i_MWd6o/s1600/ic_arrow_drop_down_48px-32.png") no-repeat 90% 50%;
 box-shadow:0px 0px 5px #ccc;
}

.selectbox1 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 
}

.selectbox1 select:focus {
    outline: none;
}

.selectbox2 {
    border: 1px solid #b0301c;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #d7452f url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kbxPT5ISACaY8UNEuP_obYHnIABGesvs9txAWJL-LyicqLa-ArmVuX3jv_DXA3jGRJSugsiEEQDcyws8ywBUt1G4CDb5ruLFqlI6g6RNgGyuNjEQsHghD4DnxmfJSMV84PGJbXhg8ra0/s1600/ic_arrow_drop_down_48px-32-2.png") no-repeat 90% 50%;
}

.selectbox2 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#fff;
}

.selectbox2 select:focus {
    outline: none;
}

.selectbox3 {
    border: 1px solid #aaaaaa;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03HnMxKUee7-LZdcNs8G-4CHwZSHG_dbuxVEKXczz4lYNY8P_90B_SKp1tj9eE5LiNVCM0czizrF8PR5itn46l9KSKnviRA-cu1haK75ycAQK4I0wHI3O4RlpK8lisWhZSLmKz_vp9A8G/s1600/drop2.png") no-repeat 100% 50%;
}

.selectbox3 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#333;
}

.selectbox3 select:focus {
    outline: none;
}

.selectbox4 {
    border: 1px solid #0a7646;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #009b57 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kbxPT5ISACaY8UNEuP_obYHnIABGesvs9txAWJL-LyicqLa-ArmVuX3jv_DXA3jGRJSugsiEEQDcyws8ywBUt1G4CDb5ruLFqlI6g6RNgGyuNjEQsHghD4DnxmfJSMV84PGJbXhg8ra0/s1600/ic_arrow_drop_down_48px-32-2.png") no-repeat 90% 50%;
}

.selectbox4 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#fff;
}

.selectbox4 select:focus {
    outline: none;
}

HTML Code

Download File Used in this example View Live Demo

Total Downloads:

Labels

How to make Css Custom Select Box

CSS Code

HTML Code

No comments:

Post a Comment