Select2 boxes should indicate they are required

A cross-browser CSS fix for  Select2 failire to display HTML5 required
warnings

app/assets/stylesheets/pages/trials.scss

+/*
+* A CSS cross-browser fix for  Select2 failire to display HTML5 required warnings
+* MR link https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22716
+*/
+.gl-select2-html5-required-fix div.select2-container+select.select2 {
+  display: block !important;
+  width: 1px;
+  height: 1px;
+  z-index: -1;
+  opacity: 0;
+  margin: -3px auto 0;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+}

ee/app/views/trials/new.html.haml

@@ -18,7 +18,7 @@
   .form-group
     = label_tag :company_name, _('Company name'), for: :company_name, class: 'col-form-label'
     = text_field_tag :company_name, params[:company_name], class: 'form-control', required: true
-  .form-group
+  .form-group.gl-select2-html5-required-fix
     = label_tag :company_size, _('Number of employees'), for: :company_size, class: 'col-form-label'
     = select_tag :company_size, company_size_options_for_select(params[:company_size]), include_blank: true, class: 'select2', required: true
   .form-group
@@ -27,9 +27,9 @@
   .form-group
     = label_tag :number_of_users, _('How many users will be evaluating the trial?'), for: :number_of_users, class: 'col-form-label'
     = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control', required: true, min: 1
-  .form-group
+  .form-group.gl-select2-html5-required-fix
     = label_tag :country, _('Country'), class: 'col-form-label'
-    = select_tag :country, options_for_select([[_('Please select a country'), '']]), class: 'select2', required: true, id: 'country_select', data: { countries_end_point: countries_path, selected_option: params[:country]}
+    = select_tag :country, options_for_select([[_('Please select a country'), '']]), class: 'select2 gl-transparent-pixel', required: true, id: 'country_select', data: { countries_end_point: countries_path, selected_option: params[:country]}
   = submit_tag _('Continue'), class: 'btn btn-success btn-block'
 
 = render 'skip_trial'

ee/app/views/trials/select.html.haml

@@ -9,7 +9,7 @@
 = render 'errors'
 
 = form_tag apply_trials_path, method: :post do
-  .form-group
+  .form-group.gl-select2-html5-required-fix
     = label_tag :namespace_id, _('This subscription is for'), for: :namespace_id, class: 'col-form-label'
     = select_tag :namespace_id, namespace_options_for_select, class: 'select2', required: true
   #group_name.form-group.hidden