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

Props isabel_brison, zieladam, poena.
Merges [51296] to the 5.8 branch.
Fixes #53560.
Built from https://develop.svn.wordpress.org/branches/5.8@51336


git-svn-id: http://core.svn.wordpress.org/branches/5.8@50945 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

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);

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);

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-RC1-51334';
+$wp_version = '5.8-RC1-51336';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.