[FEATURE] Formatting for <select>

[tti0]

Section(s)

This issue works on the marked sections of Magic [PICK ONE OR MORE]:

• Components (e.g. box, button, errors)

Type

This issue is a feature proposal

Description

Mainly for CodeDragon purposes, but certainly useful to other Magic users as well.
Could nicer-than-default formatting please be added to the <select> HTML form element, in a similar way to the default formatting on <input type="checkbox"> and <input type="text"> currently works. See screenshot for comparison below, from CodeDragon.

Thanks!
@tti0

[palkerecsenyi]

Of course! I think in the example picture you are using Firefox, which styles selects differently to other browsers. In Chrome, you'll find that Magic already applies minor styling to selects - the amount of styling applicable to them is minimal. Frameworks like Materlialize use heavy custom JS to completely re-style selects, while Magic strictly involves no JS. I'll try my best to add some custom styling. Here are current Magic styles for selects:

select {
  font-size: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-family: "Noto", "Roboto", sans-serif;
  outline: none;
  transition: all .3s ease;
  padding-right: 5px; }

select:hover {
  background-color: #F3F3F3; }

select:focus {
  background-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.5); }

select option {
  transition: all .3s ease;
  padding: 5px; }