Browse Source

Add select boxes to form styles (#5793)

Sarah Norris 3 years ago
parent
commit
ebee9e809c
2 changed files with 12 additions and 10 deletions
  1. 6 5
      blockbase/assets/ponyfill.css
  2. 6 5
      blockbase/sass/elements/_forms.scss

+ 6 - 5
blockbase/assets/ponyfill.css

@@ -277,7 +277,8 @@ input[type=time],
 input[type=datetime],
 input[type=datetime-local],
 input[type=color],
-textarea {
+textarea,
+select {
   background: var(--wp--custom--form--color--background);
   border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
   border-radius: var(--wp--custom--form--border--radius);
@@ -302,17 +303,18 @@ input[type=time]:focus,
 input[type=datetime]:focus,
 input[type=datetime-local]:focus,
 input[type=color]:focus,
-textarea:focus {
+textarea:focus,
+select:focus {
   border-color: var(--custom--form--color--border);
   color: var(--wp--custom--form--color--text);
-  outline: 1px dotted currentColor;
+  outline: 1px dotted currentcolor;
   outline-offset: 2px;
 }
 
 input[type=checkbox]:focus,
 input[type=submit]:focus,
 button:focus {
-  outline: 1px dotted currentColor;
+  outline: 1px dotted currentcolor;
   outline-offset: 2px;
 }
 input[type=checkbox]::placeholder,
@@ -323,7 +325,6 @@ button::placeholder {
 }
 
 select {
-  font-family: inherit;
   font-size: 100%;
 }
 

+ 6 - 5
blockbase/sass/elements/_forms.scss

@@ -14,7 +14,8 @@ input[type="time"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
-textarea {
+textarea,
+select {
 	background: var(--wp--custom--form--color--background);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
@@ -26,7 +27,7 @@ textarea {
 	&:focus {
 		border-color: var(--custom--form--color--border);
 		color: var(--wp--custom--form--color--text);
-		outline: 1px dotted currentColor;
+		outline: 1px dotted currentcolor;
 		outline-offset: 2px;
 	}
 }
@@ -34,8 +35,9 @@ textarea {
 input[type="checkbox"],
 input[type="submit"],
 button {
+
 	&:focus {
-		outline: 1px dotted currentColor;
+		outline: 1px dotted currentcolor;
 		outline-offset: 2px;
 	}
 
@@ -46,7 +48,6 @@ button {
 }
 
 select {
-	font-family: inherit;
 	font-size: 100%;
 }
 
@@ -55,7 +56,7 @@ textarea {
 }
 
 // Vertically align checkbox + label relationship
-input[type=checkbox] + label {
+input[type="checkbox"] + label {
 	display: inline;
 	margin-left: 0.5em;
 	line-height: 1em;