border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
input[type=datetime-local] {
border: 3px solid #39414d;
border: 3px solid #39414d;
border: 3px solid #39414d;
outline: 2px dotted #39414d;
input[type=email]:focus {
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
input[type=password]:focus {
outline: 2px dotted #39414d;
input[type=search]:focus {
outline: 2px dotted #39414d;
input[type=number]:focus {
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
input[type=month]:focus {
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
input[type=datetime]:focus {
outline: 2px dotted #39414d;
input[type=datetime-local]:focus {
outline: 2px dotted #39414d;
input[type=color]:focus {
outline: 2px dotted #39414d;
outline: 2px dotted #39414d;
input[type=text]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=color]:disabled,
.site textarea:disabled {
.is-dark-theme input[type=text] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=email] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=url] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=password] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=search] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=number] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=tel] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=date] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=month] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=week] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=time] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=datetime] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=datetime-local] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=color] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme .site textarea {
background: rgba(255, 255, 255, 0.9);
input[type=search]:focus {
.is-dark-theme input[type=search]:focus {
border: 3px solid #39414d;
-webkit-appearance: none;
padding: 10px 30px 10px 10px;
background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
background-position: right 10px top 60%;
outline: 2px dotted #39414d;
background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
background-position: right 10px top 60%;
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
-webkit-appearance: none;
border: 3px solid #39414d;
-webkit-appearance: none;
border: 3px solid #39414d;
input[type=checkbox]:disabled,
input[type=radio]:disabled {
.is-dark-theme input[type=checkbox] {
background: rgba(255, 255, 255, 0.9);
.is-dark-theme input[type=radio] {
background: rgba(255, 255, 255, 0.9);
input[type=checkbox]:focus {
outline: 2px dotted #39414d;
input[type=checkbox]:after {
border: 3px solid #28303d;
transform: rotate(30deg);
input[type=checkbox]:checked {
input[type=checkbox]:checked:after {
input[type=radio]:focus {
outline: 2px dotted #39414d;
input[type=radio]:after {
input[type=radio]:checked {
border: 4px solid #39414d;
input[type=radio]:checked:after {
input[type=radio]:checked:focus {
outline: 2px dotted #39414d;
input[type=checkbox] + label {
input[type=radio] + label {
* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
/* Specific width is required for Firefox. */
input[type=range]:disabled {
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #39414d;
input[type=range]::-moz-range-thumb {
border: 3px solid #39414d;