input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="range"],
input[type="color"],
input[type="file"],
input[type="image"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 4px;
border: 1px solid #acacac;
border-radius: 0;
outline: none;
background: none;
font-size:1rem;
}
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 1.5em 2px 8px;
border: 0;
outline: none;
background: transparent;
}
select::-ms-expand {
display: none;
}
.select{
display:inline-block;
position:relative;
border: 1px solid #acacac;
font-size:1rem;
}
.select::before{
position: absolute;
display: inline-block;
pointer-events: none;
top: calc(0.5rem + 2px);
right: 0.5rem;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 4px 0 4px;
border-color: #999 transparent transparent transparent;
content: '';
}
textarea{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
box-sizing:border-box;
padding: 0.25em 0.5em;
border: 1px solid #acacac;
outline: none;
background: transparent;
vertical-align:bottom;
max-width:100%;
min-height:5em;
font-size:1rem;
font-family:inherit;
}
button,
input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label{
padding-left: calc(12px + 0.5em);
position:relative;
}
input[type="checkbox"] + label::before{
content: "";
display: block;
position: absolute;
top: calc(50% - 7px);
left: 0;
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 3px;
}
input[type="checkbox"]:checked + label::after{
content: "";
display: block;
position: absolute;
top: calc(50% - 7px);
left: 3px;
width: 5px;
height: 8px;
transform: rotate(40deg);
border-bottom: 3px solid #acacac;
border-right: 3px solid #acacac;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label{
padding-left: calc(12px + 0.5em);
position:relative;
}
input[type="radio"] + label::before{
content: "";
display: block;
position: absolute;
top: calc(50% - 7px);
left: 0;
width: 12px;
height: 12px;
border: 1px solid #acacac;
border-radius: 50%;
}
input[type="radio"]:checked + label::after{
content: "";
display: block;
position: absolute;
top: calc(50% - 4px);
left: 3px;
width: 8px;
height: 8px;
background: #acacac;
border-radius: 50%;
}