Share some properties between all input elements

Some properties, like 'font', 'appearance', and 'color' are shared
between all our input elements. Let's reflect that in our rules.
This commit is contained in:
Samuel Mannehed 2022-12-12 15:00:18 +01:00
parent 8c1b6e19c7
commit 9107ae3a10
1 changed files with 3 additions and 26 deletions

View File

@ -8,22 +8,7 @@
input, input::file-selector-button, button, select, textarea {
/* Respect standard font settings */
font: inherit;
}
input:not([type]),
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
/* Disable default rendering */
appearance: none;
background: none;
@ -43,20 +28,11 @@ input[type=submit],
input::file-selector-button,
button,
select {
/* Disable default rendering */
appearance: none;
background: none;
border: 1px solid rgb(192, 192, 192);
border-bottom-width: 2px;
border-radius: 5px;
color: black;
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
/* This avoids it jumping around when :active */
vertical-align: middle;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}
@ -93,8 +69,8 @@ option {
input[type=checkbox] {
position: relative;
appearance: none;
background-color: white;
background-image: unset;
border: 1px solid dimgrey;
border-radius: 3px;
width: 13px;
@ -133,9 +109,10 @@ input[type=radio]:checked {
}
input[type=range] {
appearance: none;
border: unset;
border-radius: 3px;
height: 20px;
padding: 0;
background: transparent;
}
/* -webkit-slider.. & -moz-range.. cant be in selector lists: