Form Fields

Styling of form fields, including file selection button and input with multiple buttons.

Code (minimum required)

/* buttons */
  button, .button, btn, btn-primary, input[type=button], input[type=reset], input[type=submit], input::file-selector-button {
    cursor: pointer;
    font-size: 1.1rem;
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-text-color);
    border: 1px solid var(--primary-button-background-color);
    /* border-radius: .5rem;  - for rounded input/buttons */
    padding: .5rem 1rem;
    margin: 0 1rem 1rem 0;
  }
  :is(button, .button, btn, btn-primary, input[type=button], input[type=reset], input[type=submit]):where(:active, :focus, :hover) {
    border: 1px solid var(--selected-color);
    background-color: var(--selected-color);
  }
  input::file-selector-button:where(:active, :focus, :hover) { /* this doesnt work when part of the above css code */
    border: 1px solid var(--selected-color);
    background-color: var(--selected-color);
  }
  input::file-selector-button {
     margin: 0;
     margin-right: .75rem;
     border-radius: 0;
     /* border-top-left-radius: .25rem; */
     /* border-bottom-left-radius: .25rem; */
  }
  input[type=file] {
    padding: 0;
  }
  input, select, textarea {
    box-sizing: border-box; /* prevents input/textarea overflow when styled with padding */
    accent-color: var(--primary-color); /* sets color of checkboxes and radio buttons */
    font-size: 115%;
    font-family: inherit;
    background-color: var(--input-background-color);
    padding: .63rem;
    border: 1px solid var(--input-border-color);
    /* border-radius: .25rem; */
    width: 100%;
    margin-bottom: 1.5rem;
  }
  input[type=checkbox], input[type=radio] {
    width: 25px;
    height: 25px;
    margin-right: .75rem;
  }
  label:has(input[type=checkbox], input[type=radio]) {
    display: flex;
    line-height: 200%;
  }
  .input-with-button {
    display:flex;
    flex-direction:row;
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    /* border-radius: .25rem; */
    margin-bottom: 1rem;
  }
  .input-with-button input {
    flex-grow: 2; /* span available space */
    border: 0;
    margin: 0;
  }
  .input-with-button button {
    margin: 0;
    margin-left: 1px;
    white-space: nowrap;
    border-radius: 0;
  }
  .input-with-button button:last-child {
    /* border-top-right-radius: .25rem; */
    /* border-buttom-right-radius: .25rem; */
  }
  @media (prefers-color-scheme: dark) {
    input, select, textarea {
      background-color: var(--input-background-color);
    }
  }
</style>

<form>
 <label for="textField">Text Field</label>
 <input type="text" id="textField" value="text" />
 <label for="numberField">Number Field</label>
 <input type="number" id="numberField" value="10" />
 <label for="fileField">File Field</label>
 <input type="file" id="fileField" value="" />
 <label for="checkBox"><input type="checkbox" id="checkBox" checked /> Checkbox</label>
 <label for="radioButton1"><input type="radio" id="radioButton1" name="testRadio" value="1" checked /> Radio 1</label>
 <label for="radioButton2"><input type="radio" id="radioButton2" name="testRadio" value="2" /> Radio 2</label>
 <label for="radioButton3"><input type="radio" id="radioButton3" name="testRadio" value="3" /> Radio 3</label>
 <label for="selectField">Select Field</label>
 <select id="selectField"><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>
 <label for="textAreaField">Textarea Field</label>
 <textarea id="textAreaField">text area input (remove spaces in closing textarea tag ->)< textarea >
 <label for="inputWithButtons">Input with Buttons</label>
 <div class="input-with-button">
  <input type="text" id="inputWithButtons">
  <button type="button">Click Me 1</button>
  <button type="button">Click Me 2</button>
  <button type="button">Click Me 3</button>
 </div>
 <input type="submit" value="Submit" />
</form>