One place for hosting & domains

      Styling

      Styling Form Inputs in CSS With :required, :optional, :valid and :invalid


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      When it comes to validating the content of input fields on the frontend, things are much easier now than they they used to be. We can use the :required, :optional, :valid and :invalid pseudo-classes coupled with HTML5 form validation attributes like required or pattern to create very visually engaging results. These pseudo-classes work for input, textarea and select elements.

      Input pseudo-classes

      Here’s an example of the pseudo-classes at work. Let’s start with this HTML markup:

      <form action="#">
        <input type="text" placeholder="First Name" required>
        <input type="email" placeholder="Email" required>
        <input type="text" placeholder="Nickname">
        <input type="text" placeholder="Favorite pizza topping">
      </form>
      

      And let’s apply the following styles:

      input {
        border: 2px solid;
        border-radius: 4px;
        font-size: 1rem;
        margin: 0.25rem;
        min-width: 125px;
        padding: 0.5rem;
        transition: background-color 0.5s ease-out;
      }
      input:optional {
        border-color: gray;
      }
      input:required {
        border-color: black;
      }
      input:invalid {
        border-color: red;
      }
      
      

      Here’s the result:

      See the Pen vYGeLYw by alligatorio (@alligatorio) on CodePen.


      In the demo above, <input type="email" is an HTML5 input type that tells browsers to expect an email address. Because we are also using the required attribute, modern browsers will only set the input to :valid when a valid email is entered.

      Adding the :focus pseudo-class

      Let’s make things even more interesting by also styling according to the focus state and add a background image and color depending on the validity state and only when the input is in focus. We’ll use the same HTML markup.

      Here’s our updated CSS:

      input {
        border: 2px solid;
        border-radius: 4px;
        font-size: 1rem;
        margin: 0.25rem;
        min-width: 125px;
        padding: 0.5rem;
        transition: border-color 0.5s ease-out;
      }
      input:optional {
        border-color: gray;
      }
      input:required:valid {
        border-color: green;
      }
      input:invalid {
        border-color: red;
      }
      input:required:focus:valid {
        background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
        background-size: 25px;
      }
      input:focus:invalid {
        background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;
        background-size: 25px;
      }
      

      There are two key changes in the above CSS:

      1. input:required:valid applies a success state only to required inputs. Because technically, optional inputs are always valid.
      2. input:focus:valid' and 'input:focus:invalid apply to inputs only when they are focused.

      And here’s the result:

      See the Pen gOrGPxP by alligatorio (@alligatorio) on CodePen.


      You could be tempted to add content instead using ::before or ::after on the input, but unfortunately that’s not possible on input elements. One trick would be to have a sibling span element that has content added depending on the validity of the input. Something like this:

      input:focus:invalid + span::before { ... }.



      Source link

      Styling Scrollbars with CSS: The Modern Way to Style Scrollbars


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Since the early days of the web, customizing the browser’s scrollbar has proven to be very difficult to standardize across major browsers. Fortunately, on September 2018 a W3C Working Draft called CSS Scrollbars was released that looks like a viable way to finally accomplish this!

      As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling, but you will need to write two sets of CSS rules to cover Firefox, Webkit and Chromium browsers.

      Let’s jump into some code samples!

      The JavaScript solutions fall short since they have difficulty emulating high-end behaviors like inertia scrolling (eg., decaying motion when scrolling via trackpads).

      Styling scrollbars for Chrome/Edge/Safari is available behind the vendor prefix -webkit-scrollbar

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      webkit-styled scrollbars

      But there’s good news… And bad news:

      Good news! This code works perfectly fine in the latest releases of Chrome/Edge/Safari!

      Bad news? Unfortunately, this spec has been formally abandoned by W3C so we can expect it to be slowly deprecated in the coming years.

      Microsoft Edge officially switched to the Chromium V8 engine on January 2020!

      Firefox is a champion of new W3C standards, and they’re always willing to try out emerging APIs. As such, the new CSS Scrollbars features are already available in normal releases of Firefox:

      body {
        scrollbar-width: thin;          /* "auto" or "thin"  */
        scrollbar-color: blue orange;   /* scroll thumb & track */ 
      }
      

      scrollbars on firefox

      Sweet! You might have noticed a few differences compared to the deprecated -webkit-scrollbar spec.

      Firstly, it’s way more concise! And secondly, it lacks features like creating a padding and roundness for the “track thumb”. Since the spec is still changing, these missing features could likely get included.

      The Way Forward

      How do we style scrollbars considering there isn’t a single, authoritative API? Just combine both approaches!

      /* The emerging W3C standard
         that is currently Firefox-only */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome/Edge/Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      *::-webkit-scrollbar-track {
        background: orange;
      }
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Once -webkit-scrollbar is deprecated, you can fallback on the new CSS Scrollbars standard without missing a beat.

      Interactive demo below:

      See the Pen abORvVW by alligatorio (@alligatorio) on CodePen.

      Try switching to a different browser to see it working. Supports the latest Firefox/Chrome/Safari/Edge releases.



      Source link