From af36e9f8234237eeabcc1cb134b57366e57b9e57 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Mon, 26 Dec 2022 15:42:15 +0530
Subject: [PATCH] css: Add "bootstrap-focus-style" class to select elements.

This commit adds "bootstrap-focus-style" class to the select
elements such that we can add CSS rule for focusing a select
element at single place only using this class.
---
 static/styles/components.css                  |  8 +++++
 static/templates/invite_user.hbs              |  6 ++--
 static/templates/move_topic_to_stream.hbs     |  2 +-
 .../templates/settings/add_new_bot_form.hbs   |  6 ++--
 .../add_new_custom_profile_field_form.hbs     |  4 +--
 .../templates/settings/admin_human_form.hbs   |  2 +-
 .../settings/custom_user_profile_field.hbs    |  2 +-
 .../templates/settings/display_settings.hbs   |  8 ++---
 .../settings/notification_settings.hbs        |  6 ++--
 .../organization_permissions_admin.hbs        | 36 +++++++++----------
 .../settings/organization_profile_admin.hbs   |  2 +-
 .../settings/organization_settings_admin.hbs  |  8 ++---
 .../templates/settings/profile_settings.hbs   |  2 +-
 .../stream_settings/stream_types.hbs          |  4 +--
 templates/corporate/upgrade.html              |  2 +-
 templates/zerver/development/dev_login.html   |  2 +-
 .../development/integrations_dev_panel.html   |  6 ++--
 17 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/static/styles/components.css b/static/styles/components.css
index 117d43b580..0b9cc8b2b2 100644
--- a/static/styles/components.css
+++ b/static/styles/components.css
@@ -136,3 +136,11 @@ input::-ms-reveal {
         }
     }
 }
+
+select.bootstrap-focus-style {
+    &:focus {
+        outline: 1px dotted hsl(0, 0%, 20%);
+        outline: 5px auto -webkit-focus-ring-color;
+        outline-offset: -2px;
+    }
+}
diff --git a/static/templates/invite_user.hbs b/static/templates/invite_user.hbs
index ff211f7eb0..c0b1ecfb8a 100644
--- a/static/templates/invite_user.hbs
+++ b/static/templates/invite_user.hbs
@@ -32,7 +32,7 @@
                 <div class="input-group">
                     <label for="expires_in">{{t "Invitation expires after" }}</label>
                     <div>
-                        <select id="expires_in" class="invite-expires-in">
+                        <select id="expires_in" class="invite-expires-in bootstrap-focus-style">
                             {{#each expires_in_options}}
                                 <option {{#if this.default }}selected{{/if}} name="expires_in" value="{{this.value}}">{{this.description}}</option>
                             {{/each}}
@@ -42,7 +42,7 @@
                     <div id="custom-invite-expiration-time" class="dependent-settings-block">
                         <label for="expires_in">{{t "Custom time" }}</label>
                         <input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-expiration-time inline-block" value="{{time_input}}" maxlength="3"/>
-                        <select class="custom-expiration-time" id="custom-expiration-time-unit">
+                        <select class="custom-expiration-time bootstrap-focus-style" id="custom-expiration-time-unit">
                             {{#each time_choices}}
                                 <option name="custom_time_choice" class="custom_time_choice" value="{{this}}">{{this}}</option>
                             {{/each}}
@@ -55,7 +55,7 @@
                         {{> help_link_widget link="/help/roles-and-permissions" }}
                     </label>
                     <div>
-                        <select id="invite_as" class="invite-as">
+                        <select id="invite_as bootstrap-focus-style" class="invite-as">
                             <option name="invite_as" value="{{ invite_as_options.guest.code }}">{{t "Guests" }}</option>
                             <option name="invite_as" selected="selected" value="{{ invite_as_options.member.code }}">{{t "Members" }}</option>
                             {{#if is_admin}}
diff --git a/static/templates/move_topic_to_stream.hbs b/static/templates/move_topic_to_stream.hbs
index 6c31741481..9f8f6210df 100644
--- a/static/templates/move_topic_to_stream.hbs
+++ b/static/templates/move_topic_to_stream.hbs
@@ -15,7 +15,7 @@
         <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}" />
         <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
         {{#if from_message_actions_popover}}
-        <select class="message_edit_topic_propagate">
+        <select class="message_edit_topic_propagate bootstrap-focus-style">
             <option value="change_one"> {{t "Move only this message" }}</option>
             <option selected="selected" value="change_later"> {{t "Move this and all following messages in this topic" }}</option>
             <option value="change_all"> {{t "Move all messages in this topic" }}</option>
diff --git a/static/templates/settings/add_new_bot_form.hbs b/static/templates/settings/add_new_bot_form.hbs
index 24d8c03006..1f3b46841e 100644
--- a/static/templates/settings/add_new_bot_form.hbs
+++ b/static/templates/settings/add_new_bot_form.hbs
@@ -5,7 +5,7 @@
                 {{t "Bot type" }}
                 <i class="fa fa-question-circle settings-info-icon bot_type_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content='{{t "Incoming webhooks can only send messages." }}'></i>
             </label>
-            <select name="bot_type" id="create_bot_type">
+            <select name="bot_type" id="create_bot_type" class="bootstrap-focus-style">
                 {{#each bot_types}}
                     {{#if this.allowed}}
                     <option value="{{this.type_id}}">{{this.name}}</option>
@@ -15,7 +15,7 @@
         </div>
         <div class="input-group" id="service_name_list">
             <label for="select_service_name">{{t "Bot"}}</label>
-            <select name="service_name" id="select_service_name">
+            <select name="service_name" id="select_service_name" class="bootstrap-focus-style">
                 {{#each realm_embedded_bots}}
                     <option value="{{this.name}}">{{this.name}}</option>
                 {{/each}}
@@ -45,7 +45,7 @@
             </div>
             <div class="input-group">
                 <label for="interface_type">{{t "Outgoing webhook message format" }}</label>
-                <select name="interface_type" id="create_interface_type">
+                <select name="interface_type" id="create_interface_type" class="bootstrap-focus-style">
                     <option value="1">Zulip</option>
                     <option value="2">{{t "Slack compatible" }}</option>
                 </select>
diff --git a/static/templates/settings/add_new_custom_profile_field_form.hbs b/static/templates/settings/add_new_custom_profile_field_form.hbs
index 67db10eadc..88c107b0c9 100644
--- a/static/templates/settings/add_new_custom_profile_field_form.hbs
+++ b/static/templates/settings/add_new_custom_profile_field_form.hbs
@@ -2,7 +2,7 @@
     <div class="new-profile-field-form wrapper">
         <div class="input-group">
             <label for="profile_field_type" >{{t "Type" }}</label>
-            <select id="profile_field_type" name="field_type">
+            <select id="profile_field_type" name="field_type" class="bootstrap-focus-style">
                 {{#each custom_profile_field_types}}
                     <option value='{{this.id}}'>{{this.name}}</option>
                 {{/each}}
@@ -10,7 +10,7 @@
         </div>
         <div class="input-group" id="profile_field_external_accounts">
             <label for="profile_field_external_accounts_type" >{{t "External account type" }}</label>
-            <select id="profile_field_external_accounts_type" name="external_acc_field_type">
+            <select id="profile_field_external_accounts_type" name="external_acc_field_type" class="bootstrap-focus-style">
                 {{#each realm_default_external_accounts}}
                     <option value='{{@key}}'>{{this.text}}</option>
                 {{/each}}
diff --git a/static/templates/settings/admin_human_form.hbs b/static/templates/settings/admin_human_form.hbs
index 120811e2fa..fe55710074 100644
--- a/static/templates/settings/admin_human_form.hbs
+++ b/static/templates/settings/admin_human_form.hbs
@@ -19,7 +19,7 @@
             <label class="input-label" for="user-role-select">{{t 'User role' }}
                 {{> ../help_link_widget link="/help/roles-and-permissions" }}
             </label>
-            <select name="user-role-select" id="user-role-select" data-setting-widget-type="number" {{#if disable_role_dropdown}}disabled{{/if}}>
+            <select name="user-role-select" class="bootstrap-focus-style" id="user-role-select" data-setting-widget-type="number" {{#if disable_role_dropdown}}disabled{{/if}}>
                 {{> dropdown_options_widget option_values=user_role_values}}
             </select>
         </div>
diff --git a/static/templates/settings/custom_user_profile_field.hbs b/static/templates/settings/custom_user_profile_field.hbs
index 5e10df1f89..2ecf33532b 100644
--- a/static/templates/settings/custom_user_profile_field.hbs
+++ b/static/templates/settings/custom_user_profile_field.hbs
@@ -6,7 +6,7 @@
         {{#if is_long_text_field}}
         <textarea maxlength="500" class="custom_user_field_value settings_textarea">{{ field_value.value }}</textarea>
         {{else if is_select_field}}
-        <select class="custom_user_field_value">
+        <select class="custom_user_field_value bootstrap-focus-style">
             <option value=""></option>
             {{#each field_choices}}
                 <option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
diff --git a/static/templates/settings/display_settings.hbs b/static/templates/settings/display_settings.hbs
index 3ee361effe..7f8b234eca 100644
--- a/static/templates/settings/display_settings.hbs
+++ b/static/templates/settings/display_settings.hbs
@@ -19,7 +19,7 @@
 
         <div class="input-group">
             <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
-            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
+            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element bootstrap-focus-style" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
                 {{#each twenty_four_hour_time_values}}
                     <option value='{{ this.value }}'>{{ this.description }}</option>
                 {{/each}}
@@ -37,7 +37,7 @@
 
         <div class="input-group">
             <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}</label>
-            <select name="color_scheme" class="setting_color_scheme prop-element" id="{{prefix}}color_scheme" data-setting-widget-type="number">
+            <select name="color_scheme" class="setting_color_scheme prop-element bootstrap-focus-style" id="{{prefix}}color_scheme" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=color_scheme_values}}
             </select>
         </div>
@@ -118,7 +118,7 @@
             <label for="default_view" class="dropdown-title">{{t "Default view" }}
                 {{> ../help_link_widget link="/help/configure-default-view" }}
             </label>
-            <select name="default_view" class="setting_default_view prop-element" id="{{prefix}}default_view" data-setting-widget-type="string">
+            <select name="default_view" class="setting_default_view prop-element bootstrap-focus-style" id="{{prefix}}default_view" data-setting-widget-type="string">
                 {{> dropdown_options_widget option_values=default_view_values}}
             </select>
         </div>
@@ -133,7 +133,7 @@
             <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
                 {{> ../help_link_widget link="/help/manage-inactive-streams" }}
             </label>
-            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element" id="{{prefix}}demote_inactive_streams"  data-setting-widget-type="number">
+            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element bootstrap-focus-style" id="{{prefix}}demote_inactive_streams"  data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
             </select>
         </div>
diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs
index 5205bb341c..e14fe924f8 100644
--- a/static/templates/settings/notification_settings.hbs
+++ b/static/templates/settings/notification_settings.hbs
@@ -73,7 +73,7 @@
             {{t "Notification sound" }}
         </label>
 
-        <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
+        <div class="input-group bootstrap-focus-style {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
             <select name="notification_sound" class="setting_notification_sound prop-element" id="{{prefix}}notification_sound" data-setting-widget-type="string"
               {{#unless enable_sound_select}}
               disabled
@@ -90,7 +90,7 @@
 
         <div class="input-group">
             <label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label>
-            <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
+            <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element bootstrap-focus-style" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=desktop_icon_count_display_values}}
             </select>
         </div>
@@ -129,7 +129,7 @@
             <label for="email_notifications_batching_period">
                 {{t "Delay before sending message notification emails" }}
             </label>
-            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
+            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element bootstrap-focus-style" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
                 {{#each email_notifications_batching_period_values}}
                     <option value="{{ this.value }}">{{ this.description }}</option>
                 {{/each}}
diff --git a/static/templates/settings/organization_permissions_admin.hbs b/static/templates/settings/organization_permissions_admin.hbs
index 1ff6115d15..2538a8a47d 100644
--- a/static/templates/settings/organization_permissions_admin.hbs
+++ b/static/templates/settings/organization_permissions_admin.hbs
@@ -18,14 +18,14 @@
                       label=admin_settings_label.realm_invite_required}}
                     <label for="realm_invite_to_realm_policy" class="dropdown-title">{{t "Who can invite users to this organization" }}
                     </label>
-                    <select name="realm_invite_to_realm_policy" id="id_realm_invite_to_realm_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_invite_to_realm_policy" id="id_realm_invite_to_realm_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=invite_to_realm_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_org_join_restrictions" class="dropdown-title">{{t "Restrict email domains of new users?" }}</label>
-                    <select name="realm_org_join_restrictions" id="id_realm_org_join_restrictions" class="prop-element">
+                    <select name="realm_org_join_restrictions" id="id_realm_org_join_restrictions" class="prop-element bootstrap-focus-style">
                         <option value="no_restriction">{{t "No restrictions" }}</option>
                         <option value="no_disposable_email">{{t "Don’t allow disposable email addresses" }}</option>
                         <option value="only_selected_domain">{{t "Restrict to a list of domains" }}</option>
@@ -42,7 +42,7 @@
                         {{t "Waiting period before new members turn into full members" }}
                         {{> ../help_link_widget link="/help/restrict-permissions-of-new-members" }}
                     </label>
-                    <select name="realm_waiting_period_threshold" id="id_realm_waiting_period_threshold" class="prop-element" data-setting-widget-type="time-limit">
+                    <select name="realm_waiting_period_threshold" id="id_realm_waiting_period_threshold" class="prop-element bootstrap-focus-style" data-setting-widget-type="time-limit">
                         {{> dropdown_options_widget option_values=waiting_period_threshold_dropdown_values}}
                     </select>
                     {{!-- This setting is hidden unless `custom_period` --}}
@@ -85,7 +85,7 @@
                 <label for="realm_email_address_visibility">{{t "Who can access user email addresses" }}
                     {{> ../help_link_widget link="/help/restrict-visibility-of-email-addresses" }}
                 </label>
-                <select name="realm_email_address_visibility" class="setting-widget prop-element" id="id_realm_email_address_visibility" data-setting-widget-type="number">
+                <select name="realm_email_address_visibility" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_email_address_visibility" data-setting-widget-type="number">
                     {{> dropdown_options_widget option_values=email_address_visibility_values}}
                 </select>
             </div>
@@ -99,7 +99,7 @@
             <div class="m-10 inline-block organization-permissions-parent">
                 <div class="input-group">
                     <label for="realm_create_public_stream_policy" class="dropdown-title">{{t "Who can create public streams" }}</label>
-                    <select name="realm_create_public_stream_policy" id="id_realm_create_public_stream_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_create_public_stream_policy" id="id_realm_create_public_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -113,19 +113,19 @@
                   help_link="/help/public-access-option"}}
                 <div class="input-group realm_create_web_public_stream_policy">
                     <label for="realm_create_web_public_stream_policy" class="dropdown-title">{{t "Who can create web-public streams" }}</label>
-                    <select name="realm_create_web_public_stream_policy" id="id_realm_create_web_public_stream_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_create_web_public_stream_policy" id="id_realm_create_web_public_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=create_web_public_stream_policy_values}}
                     </select>
                 </div>
                 <div class="input-group">
                     <label for="realm_create_private_stream_policy" class="dropdown-title">{{t "Who can create private streams" }}</label>
-                    <select name="realm_create_private_stream_policy" id="id_realm_create_private_stream_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_create_private_stream_policy" id="id_realm_create_private_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
                 <div class="input-group">
                     <label for="realm_invite_to_stream_policy" class="dropdown-title">{{t "Who can add users to streams" }}</label>
-                    <select name="realm_invite_to_stream_policy" id="id_realm_invite_to_stream_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_invite_to_stream_policy" id="id_realm_invite_to_stream_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -133,7 +133,7 @@
                     <label for="realm_wildcard_mention_policy" class="dropdown-title">{{t "Who can use @all/@everyone mentions in large streams" }}
                         {{> ../help_link_widget link="/help/restrict-wildcard-mentions" }}
                     </label>
-                    <select name="realm_wildcard_mention_policy" id="id_realm_wildcard_mention_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_wildcard_mention_policy" id="id_realm_wildcard_mention_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=wildcard_mention_policy_values}}
                     </select>
                 </div>
@@ -162,7 +162,7 @@
 
                 <div class="input-group time-limit-setting">
                     <label for="realm_message_content_edit_limit_seconds" class="dropdown-title">{{t "Time limit for editing messages" }}</label>
-                    <select name="realm_message_content_edit_limit_seconds" id="id_realm_message_content_edit_limit_seconds" class="prop-element" {{#unless realm_allow_message_editing}}disabled{{/unless}} data-setting-widget-type="time-limit">
+                    <select name="realm_message_content_edit_limit_seconds" id="id_realm_message_content_edit_limit_seconds" class="prop-element bootstrap-focus-style" {{#unless realm_allow_message_editing}}disabled{{/unless}} data-setting-widget-type="time-limit">
                         {{#each msg_edit_limit_dropdown_values}}
                             <option value="{{value}}">{{text}}</option>
                         {{/each}}
@@ -191,7 +191,7 @@
             </div>
             <div class="input-group">
                 <label for="realm_edit_topic_policy" class="dropdown-title">{{t "Who can move messages to another topic" }}</label>
-                <select name="realm_edit_topic_policy" id="id_realm_edit_topic_policy" class="prop-element" data-setting-widget-type="number">
+                <select name="realm_edit_topic_policy" id="id_realm_edit_topic_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                     {{> dropdown_options_widget option_values=edit_topic_policy_values}}
                 </select>
             </div>
@@ -199,7 +199,7 @@
             <div class="input-group">
                 <label for="realm_move_messages_between_streams_policy">{{t "Who can move messages to another stream" }}
                 </label>
-                <select name="realm_move_messages_between_streams_policy" class="setting-widget prop-element" id="id_realm_move_messages_between_streams_policy" data-setting-widget-type="number">
+                <select name="realm_move_messages_between_streams_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_move_messages_between_streams_policy" data-setting-widget-type="number">
                     {{> dropdown_options_widget option_values=move_messages_between_streams_policy_values}}
                 </select>
             </div>
@@ -220,7 +220,7 @@
                     <label for="realm_delete_own_message_policy" class="dropdown-title">
                         {{t "Who can delete their own messages" }}
                     </label>
-                    <select name="realm_delete_own_message_policy" id="id_realm_delete_own_message_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_delete_own_message_policy" id="id_realm_delete_own_message_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_message_policy_values}}
                     </select>
                 </div>
@@ -229,7 +229,7 @@
                     <label for="realm_message_content_delete_limit_seconds" class="dropdown-title">
                         {{t "Time limit for deleting messages" }}
                     </label>
-                    <select name="realm_message_content_delete_limit_seconds" id="id_realm_message_content_delete_limit_seconds" class="prop-element" data-setting-widget-type="time-limit">
+                    <select name="realm_message_content_delete_limit_seconds" id="id_realm_message_content_delete_limit_seconds" class="prop-element bootstrap-focus-style" data-setting-widget-type="time-limit">
                         {{#each msg_delete_limit_dropdown_values}}
                             <option value="{{value}}">{{text}}</option>
                         {{/each}}
@@ -256,21 +256,21 @@
             <div class="m-10 inline-block organization-permissions-parent">
                 <div class="input-group">
                     <label for="realm_bot_creation_policy">{{t "Who can add bots" }}</label>
-                    <select name="realm_bot_creation_policy" class="setting-widget prop-element" id="id_realm_bot_creation_policy" data-setting-widget-type="number">
+                    <select name="realm_bot_creation_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_bot_creation_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=bot_creation_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_user_group_edit_policy" class="dropdown-title">{{t "Who can create and manage user groups" }}</label>
-                    <select name="realm_user_group_edit_policy" id="id_realm_user_group_edit_policy" class="prop-element" data-setting-widget-type="number">
+                    <select name="realm_user_group_edit_policy" id="id_realm_user_group_edit_policy" class="prop-element bootstrap-focus-style" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
 
                 <div class="input-group">
                     <label for="realm_add_custom_emoji_policy" class="dropdown-title">{{t "Who can add custom emoji" }}</label>
-                    <select name="realm_add_custom_emoji_policy" class="setting-widget prop-element" id="id_realm_add_custom_emoji_policy" data-setting-widget-type="number">
+                    <select name="realm_add_custom_emoji_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_add_custom_emoji_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=common_policy_values}}
                     </select>
                 </div>
@@ -279,7 +279,7 @@
                     <label for="realm_private_message_policy">{{t "Who can use private messages" }} ({{t "beta" }})
                         {{> ../help_link_widget link="/help/restrict-private-messages" }}
                     </label>
-                    <select name="realm_private_message_policy" class="setting-widget prop-element" id="id_realm_private_message_policy" data-setting-widget-type="number">
+                    <select name="realm_private_message_policy" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_private_message_policy" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=private_message_policy_values}}
                     </select>
                 </div>
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index 5d4c02c7a9..22c370de66 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -21,7 +21,7 @@
                     <label for="realm_org_type" class="dropdown-title">{{t "Organization type" }}
                         {{> ../help_link_widget link="/help/organization-type" }}
                     </label>
-                    <select name="realm_org_type" class="setting-widget prop-element" id="id_realm_org_type" data-setting-widget-type="number">
+                    <select name="realm_org_type" class="setting-widget prop-element bootstrap-focus-style" id="id_realm_org_type" data-setting-widget-type="number">
                         {{> dropdown_options_widget option_values=realm_org_type_values}}
                     </select>
                 </div>
diff --git a/static/templates/settings/organization_settings_admin.hbs b/static/templates/settings/organization_settings_admin.hbs
index 240417a1b0..3f4bd24dd7 100644
--- a/static/templates/settings/organization_settings_admin.hbs
+++ b/static/templates/settings/organization_settings_admin.hbs
@@ -23,7 +23,7 @@
                     <label for="realm_digest_weekday" class="dropdown-title">{{t "Day of the week to send digests" }}</label>
                     <select name="realm_digest_weekday"
                       id="id_realm_digest_weekday"
-                      class="setting-widget prop-element"
+                      class="setting-widget prop-element bootstrap-focus-style"
                       data-setting-widget-type="number">
                         <option value="0">{{t "Monday" }}</option>
                         <option value="1">{{t "Tuesday" }}</option>
@@ -74,7 +74,7 @@
                     <label for="id_realm_message_retention_days" class="dropdown-title">{{t "Message retention period" }}
                     </label>
                     <select name="realm_message_retention_days"
-                      id="id_realm_message_retention_days" class="prop-element"
+                      id="id_realm_message_retention_days" class="prop-element bootstrap-focus-style"
                       data-setting-widget-type="message-retention-setting"
                       {{#unless zulip_plan_is_not_limited}}disabled{{/unless}}>
                         <option value="unlimited">{{t 'Retain forever' }}</option>
@@ -105,7 +105,7 @@
                     <label for="realm_video_chat_provider" class="dropdown-title">
                         {{t 'Video call provider' }}
                     </label>
-                    <select name="realm_video_chat_provider" class ="setting-widget prop-element" id="id_realm_video_chat_provider" data-setting-widget-type="number">
+                    <select name="realm_video_chat_provider" class ="setting-widget prop-element bootstrap-focus-style" id="id_realm_video_chat_provider" data-setting-widget-type="number">
                         {{#each realm_available_video_chat_providers}}
                             <option value='{{this.id}}'>{{this.name}}</option>
                         {{/each}}
@@ -116,7 +116,7 @@
                         {{t 'GIPHY integration' }}
                         {{> ../help_link_widget link=giphy_help_link }}
                     </label>
-                    <select name="realm_giphy_rating" class ="setting-widget prop-element" id="id_realm_giphy_rating" data-setting-widget-type="number" {{#if giphy_api_key_empty}}disabled{{/if}}>
+                    <select name="realm_giphy_rating" class ="setting-widget prop-element bootstrap-focus-style" id="id_realm_giphy_rating" data-setting-widget-type="number" {{#if giphy_api_key_empty}}disabled{{/if}}>
                         {{#each giphy_rating_options}}
                             <option value='{{this.id}}'>{{this.name}}</option>
                         {{/each}}
diff --git a/static/templates/settings/profile_settings.hbs b/static/templates/settings/profile_settings.hbs
index 030749614e..2a0083ab27 100644
--- a/static/templates/settings/profile_settings.hbs
+++ b/static/templates/settings/profile_settings.hbs
@@ -20,7 +20,7 @@
                         <label for="timezone" class="dropdown-title inline-block">{{t "Time zone" }}</label>
                         <div class="alert-notification timezone-setting-status"></div>
                         <div class="timezone-input">
-                            <select name="timezone" id="user_timezone" class>
+                            <select name="timezone" id="user_timezone" class="bootstrap-focus-style">
                                 {{#unless settings_object.timezone}}
                                 <option></option>
                                 {{/unless}}
diff --git a/static/templates/stream_settings/stream_types.hbs b/static/templates/stream_settings/stream_types.hbs
index 2aba113bd5..01da984fa2 100644
--- a/static/templates/stream_settings/stream_types.hbs
+++ b/static/templates/stream_settings/stream_types.hbs
@@ -31,7 +31,7 @@
     <label class="dropdown-title">{{t 'Who can post to the stream?'}}
         {{> ../help_link_widget link="/help/stream-sending-policy" }}
     </label>
-    <select name="stream-post-policy" class="stream_post_policy_setting prop-element" id="id_stream_post_policy" data-setting-widget-type="number">
+    <select name="stream-post-policy" class="stream_post_policy_setting prop-element bootstrap-focus-style" id="id_stream_post_policy" data-setting-widget-type="number">
         {{#each stream_post_policy_values}}
             <option value="{{this.code}}" {{#if (eq this.code ../stream_post_policy) }}selected{{/if}}>
                 {{ this.description}}
@@ -50,7 +50,7 @@
         {{> ../settings/upgrade_tip_widget}}
 
         <select name="stream_message_retention_setting"
-          class="stream_message_retention_setting prop-element"
+          class="stream_message_retention_setting prop-element bootstrap-focus-style"
           id="id_message_retention_days"
           data-setting-widget-type="message-retention-setting">
             <option value="realm_default">{{#tr}}Use organization level settings {org_level_message_retention_setting}{{/tr}}</option>
diff --git a/templates/corporate/upgrade.html b/templates/corporate/upgrade.html
index 982e22426f..32ddb7ef9d 100644
--- a/templates/corporate/upgrade.html
+++ b/templates/corporate/upgrade.html
@@ -248,7 +248,7 @@
                                 <label>
                                     <h4>Organization type</h4>
                                 </label>
-                                <select name="organization-type">
+                                <select name="organization-type" class="bootstrap-focus-style">
                                     {% for org_type in sorted_org_types %}
                                         {% if not org_type[1].hidden %}
                                         <option data-string-value="{{ org_type[0] }}"
diff --git a/templates/zerver/development/dev_login.html b/templates/zerver/development/dev_login.html
index 30e80d26d4..107aab723d 100644
--- a/templates/zerver/development/dev_login.html
+++ b/templates/zerver/development/dev_login.html
@@ -99,7 +99,7 @@ page can be easily identified in it's respective JavaScript file -->
         <form name="change_realm" action="{{ url('login_page') }}" method="post">
             {{ csrf_input }}
             <h2>Realm</h2>
-            <select name="new_realm" onchange="this.form.submit()">
+            <select class="bootstrap-focus-style" name="new_realm" onchange="this.form.submit()">
                 <option value="all_realms" {% if not current_realm %}selected="selected"{% endif %}>All realms</option>
                 {% for realm in all_realms %}
                 <option value="{{realm.string_id}}" {% if current_realm == realm %}selected="selected"{% endif %}>{{realm.name}}</option>
diff --git a/templates/zerver/development/integrations_dev_panel.html b/templates/zerver/development/integrations_dev_panel.html
index 0f66f3ef09..37f6fb4368 100644
--- a/templates/zerver/development/integrations_dev_panel.html
+++ b/templates/zerver/development/integrations_dev_panel.html
@@ -37,7 +37,7 @@
     <div class="row1">
         <div>
             <label for="bot_name"><b>Bot</b></label>
-            <select id="bot_name">
+            <select class="bootstrap-focus-style" id="bot_name">
                 <option value=""></option>
                 {% for bot in bots %}
                 <option value="{{ bot.api_key }}"> {{ bot.full_name }} </option>
@@ -47,7 +47,7 @@
 
         <div>
             <label><b>Integration</b></label>
-            <select id="integration_name">
+            <select class="bootstrap-focus-style" id="integration_name">
                 <option value=""></option>
                 {% for integration in integrations %}
                 <option value="{{ integration }}"> {{ integration }} </option>
@@ -57,7 +57,7 @@
 
         <div>
             <label for="fixture_name"><b>Fixture</b></label>
-            <select id="fixture_name"></select>
+            <select class="bootstrap-focus-style" id="fixture_name"></select>
         </div>
 
         <div>