Twenty Twenty-One: Ensure the dropdown arrow displays for <select> elements when focused.

Props isabel_brison, zieladam, poena.
Fixes #53560.

git-svn-id: https://develop.svn.wordpress.org/trunk@51296 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -324,6 +324,19 @@ select {
 	background-position: right 10px top 60%;
 }
 
+select:focus {
+	border: 3px solid #39414d;
+	border-radius: 0;
+	color: #28303d;
+	font-size: 1.125rem;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	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%;
+}
+
 /*
  * text-underline-offset doesn't work in Chrome at all 👎
  * But looks nice in Safari/Firefox, so let's keep it and

src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -449,7 +449,8 @@ figcaption,
 	padding: 0;
 }
 
-select {
+select,
+select:focus {
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
 	color: var(--form--color-text);

src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss

@@ -1,4 +1,5 @@
-select {
+select,
+select:focus {
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
 	color: var(--form--color-text);