Best css and jquery tutorials: Css UI Controlls

Make Beautifull Contact Forms in CSS by this simple css tutorial. Just download this file and make experiments with colors and shadows.Best tutorial of Css forms.

How to Make Beautifull Contact Forms in CSS

CSS CODE

body{
font-family:Arial, Helvetica, sans-serif;
}
#form
{
 background:#59c03d;
 width:300px;
 padding:20px;
 font-size:14px;
 color:#fff;
}
#form h1
{
 font-weight:normal;
 margin:0px;
 padding:0px;
}
#form label
{
 display:block;
 margin:15px 0px 5px 0px;
}
#form input[type="text"]
{
 width:94%;
 padding:8px 2%;
 border:none;
 border:solid 2px #49ae2e;
}
#form .buttons
{
 margin:20px 0px 10px 0px;
}
#form .buttons input[type="submit"],#form .buttons input[type="reset"]
{
 background:#fff;
 border:none;
 color:#666;
 padding:5px 10px;
 font-size:17px;
 cursor:pointer;
}
#form .buttons input[type="submit"]:active,#form .buttons input[type="reset"]:active
{
 position:relative;
 top:1px;
}

HTML Code


 
    Contact Us
    
    
    Name
    
    
    Email
    
    
    Website
    
    
    Message

Download File Used in this example View Live Demo

Total Downloads:

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 Beautifull Contact Forms in CSS

CSS CODE

HTML Code

Contact Us

How to make Css Custom Select Box

CSS Code

HTML Code