contact-form/assets/css/form.css
2020-02-01 18:40:02 +01:00

56 lines
No EOL
1.3 KiB
CSS

form,input,select,textarea,button {
font-family: avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
display: block;
margin: 0 0 2rem 0;
padding: 1rem 0;
width: 100% !important;
align-items: flex-start;
box-sizing: border-box;
}
input,select,textarea {
color: darkslategray;
background-color: white;
background-clip: padding-box;
line-height: 1.5;
border-radius: .5rem;
padding: 1rem 4rem;
border: 1px solid #ced4da;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
select:required:invalid {
color: silver;
}
input:focus, select:focus, textarea:focus {
border-color: royalblue;
box-shadow: none;
-webkit-box-shadow: none;
}
button {
margin-bottom: 0;
color: white;
background-color: royalblue;
border-color: royalblue;
user-select: none;
line-height: 1.5;
border-radius: .5rem;
border: 1px solid transparent;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button:hover {
filter: brightness(80%);
}
input:placeholder {
color: silver;
}
option[value=""][disabled] {
display: none;
color: silver;
}
option {
color: black;
}