readme.md

Cross-browser input styling

This CSS stylesheet aims to provide easy cross-browser styling for a few input elements:

• checkboxes
• radio buttons
• color picker

It also applies a generic style to any wrapped <input>.

How to use

Simply wrap the input element in a <span> : <span> <input type="checkbox"> </span>. The styling only applies to inputs that are the only direct children of such a span in order not to interfere with existing styles.

input-styles.css

/* colors */
:root {
   --hoverColor: orange;
   --disabledColor: grey;
}

/* generic wrapper */
span:has(>input:only-child) {
   display: inline-flex;
   position: relative;

   border: .15em solid;
   margin: .25em;
   transition: .2s;

   &:hover,
   &:has(:focus) {
      color: var(--hoverColor);
   }

   &::before {
      width: 100%;
      height: 0;
      line-height: 0;
      text-align: center;
      position: absolute;
      top: 50%;
   }
}

/* disabled */
span:has(>input:disabled) {
   color: var(--disabledColor) !important;
   cursor: not-allowed !important;

   * {
      cursor: not-allowed !important;
   }
}

/* checkbox */
span:has(>input[type="checkbox"]:only-child) {

   input {
      height: 1.5em;
      width: 1.5em;
      opacity: 0;
      margin: 0;
      cursor: pointer;
   }

   &::before {
      content: '✓';
      font-weight: bold;
      opacity: 0;
      transition: opacity .2s;
   }
}

span:has(>input[type="checkbox"]:checked)::before {
   opacity: 1;
}

/* radio buttons */
span:has(>input[type="radio"]:only-child) {
   border-radius: 100%;

   input[type="radio"] {
      height: 1em;
      width: 1em;
      opacity: 0;
      margin: 0;
      cursor: pointer;
   }

   &::before {
      content: '';
      background-color: var(--hoverColor);
      top: 0;
      height: 70%;
      width: 70%;
      margin: 15%;
      border-radius: 100%;
      opacity: 0;
      transition: opacity .2s;
   }
}

span:has(>input[type="radio"]:checked)::before {
   opacity: 1;
}

/* color picker */
span:has(>input[type="color"]:only-child) {

   input[type="color"] {
      height: 2em;
      width: 4em;
      opacity: 0;
      margin: 0;
      cursor: pointer;
   }

   &::before {
      background: linear-gradient(to right, red, lime, blue);
      outline: .1em solid;
      height: 80%;
      top: 10%;
      width: 90%;
      left: 5%;
      content: '';
   }
}

/* range */
span:has(>input[type="range"]:only-child) {
   border-radius: 1em;

   input {
      cursor: pointer;
   }
}

/* others */
span:has(>input:only-child) {
   input {
      background-color: transparent;
      background-color: transparent;
      color: inherit;
      border: none;
      outline: none;
      margin: .2em;
   }


   ::selection {
      background-color: var(--disabledColor);
   }
}