|

Style WP-Forms as material

Modify wpform’s css to use the following css, or add to your custom css

[cc lang=”css”]
div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=range],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
/*
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
*/
border-radius: 0px;
box-sizing: border-box;
color: #fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
display: block;
float: none;
font-size: 16px;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
border-bottom:2px solid #fff;
outline:none;
}

div.wpforms-container-full .wpforms-form input[type=checkbox],
div.wpforms-container-full .wpforms-form input[type=radio] {
border-bottom: 1px solid #ccc;
background-color: #fff;
width: 14px;
height: 14px;
margin: 0px 10px 0 3px;
display: inline-block;
vertical-align: baseline;
}
[/cc]

Explanation: disable the default input styling, then add one white border-bottom for all controls

Leave a Reply

Your email address will not be published. Required fields are marked *