Select: Minor style and usability improvements (#36628)

* Select: Minor style & hover improvements

* added testid

* change to aria label

packages/grafana-ui/src/components/Select/InputControl.tsx

@@ -42,6 +42,7 @@ const getInputControlStyles = stylesFactory(
           justify-content: space-between;
           position: relative;
           box-sizing: border-box;
+          cursor: ${disabled ? 'not-allowed' : 'pointer'};
         `,
         withPrefix &&
           css`

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -293,6 +293,9 @@ export function SelectBase<T>({
             return (
               <Icon
                 name="times"
+                role="button"
+                aria-label="select-clear-value"
+                className={styles.singleValueRemove}
                 onMouseDown={(e) => {
                   e.preventDefault();
                   e.stopPropagation();

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -94,11 +94,24 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
       padding: ${theme.spacing(0.25, 0, 0.25, 1)};
       color: ${theme.colors.text.primary};
       font-size: ${theme.typography.size.sm};
+
+      &:hover {
+        background: ${theme.colors.emphasize(theme.colors.background.secondary)};
+      }
     `,
     multiValueRemove: css`
       label: grafana-select-multi-value-remove;
       margin: ${theme.spacing(0, 0.5)};
       cursor: pointer;
+      svg {
+        margin-bottom: 0;
+      }
+    `,
+    singleValueRemove: css`
+      cursor: pointer;
+      &:hover {
+        color: ${theme.colors.text.primary};
+      }
     `,
   };
 });