Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Focus

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      focus

      CSS focus

      The :focus pseudo-class in CSS represents an element that has received focus. This class is generally triggered when a user clicks, taps on an element or selects an element using the tab key of keyboard.
      :focus pseudo-class is applied to the focussed element itself. In order to select an element that contains a focussed element, use :focus-within pseudo-class.

      Applies to

      All HTML elements, such as buttons, dropdowns, input fields, etc.

      Syntax

      selector:focus{ properties }

      CSS Focus - Link

      Here is an example where focus is set on a link:
      <html>
      <head>
      <style>
          a {
              color: darkviolet;
              transition: all 0.3s ease;
          }
      
          a:focus {
              outline: none;
              color: red;
              background-color: yellow;
          }
      
          body {
              margin: 5px;
              padding: 2rem;
              display: grid;
              font: 20px/1.4 system-ui, -apple-system, sans-serif;
          }
      </style>
      </head>
      <body>
          <p>Click on the link or press the tab key.</p>
          <p>The link here has a <a href="#0">change in background and foreground color</a> as it is focussed.</p>
      </body>
      </html>

      CSS Focus - Button

      Here is an example where focus is set on a button:
      <html>
      <head>
      <style>
         button {
            display: block;
            margin: 2em;
            padding: 2px;
            font-weight: bold;
            font-size: 18px;
            text-align: center;
            color: black;
            background-color: #fff;
            border: 2px solid black;
            border-radius: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 150px;
            height: 50px;
         }
         button:hover {
            color: blue;
            border-color: black;
            background-color: lightpink;
         }
         button:focus {
            background-color: darkred;
            color: white;
            border-radius: 2px;
         }
      </style>
      </head>
      <body>
          <p>Click on the button or press the tab key.</p>
          <button>Click Me!!</button>
      </body>
      </html>

      CSS Focus - Input Box

      Here is an example where focus is set on an input:
      <html>
      <head>
      <style>
         label {
            display: block;
            font-size: 20px;
            color: black;
            width: 500px;
         }
      
         input[type="text"] {
            padding: 10px 16px;
            font-size: 16px;
            color: black;
            background-color: #fff;
            border: 1px solid #597183;
            border-radius: 8px;
            margin-top: 5px;
            width: 500px;
            transition: all 0.3s ease;
         }
      
         input[type="text"]:focus {
            background-color: lightyellow;
         }
      </style>
      </head>
      <body>
          <p>Click on the text box or press the tab key.</p>
         <form>
            <label>
               Full Name
            <input type="text">
            </label>
         </form>
      </body>
      </html>

      CSS Focus - Dropdown Box

      Here is an example where focus is set on a dropdown:
      <html>
      <head>
      <style>
         label {
            display: block;
            font-size: 18px;
            color: black;
            width: 500px;
         }
      
         select {
            padding: 10px 16px;
            font-size: 16px;
            color: black;
            background-color: #fff;
            border: 1px solid #597183;
            border-radius: 8px;
            margin-top: 25px;
            width: 300px;
            transition: all 0.3s ease;
         }
      
         select:focus {
            background-color: rgb(173, 233, 209);
            box-shadow: 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
         }
      </style>
      </head>
      <body>
         <p>Select an item from the dropdown box.</p>
         <form>
            <label>
               Ice cream Flavors:
               <select name="flavor">
                  <option>Cookie dough</option>
                  <option>Pistachio</option>
                  <option>Cookies & Cream</option>
                  <option>Cotton Candy</option>
                  <option>Lemon & Raspberry Sorbet</option>
                </select>
            </label>
         </form>
      </body>
      </html>

      CSS Focus - Toggle Button

      Here is an example where focus is set on a toggle:
      <html>
      <head>
      <style>
      .toggle {
        position: relative;
        display: block;
        width: 100%;
        margin: 2em;
      }
      
      .toggle label {
        padding-right: 8px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 16px;
        line-height: 28px;
        color: black;
      }
      
      .toggle span {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
      }
      
      .toggle span:before {
        display: block;
        width: 50px;
        height: 30px;
        content: "";
        background-color: #a9adaf;
        border-radius: 28px;
        transition: background-color 0.3s ease;
      }
      
      .toggle span:after {
        position: absolute;
        top: 1px;
        left: 1px;
        display: block;
        width: 30px;
        height: 28px;
        visibility: visible;
        content: "";
        background-color: #fff;
        border-radius: 28px;
        transition: left 0.3s ease;
      }
      
      input[type="checkbox"]:checked ~ span:before {
        background-color: orange;
      }
      
      input[type="checkbox"]:checked ~ span:after {
        top: 1px;
        left: 21px;
      }
      
      input[type="checkbox"]:hover ~ span:before {
        background-color: #1194d1;
      }
      
      input[type="checkbox"]:not(:checked):hover ~ span:before {
        background-color: #afbec9;
      }
      
      input[type="checkbox"]:focus ~ span:before {
        outline: none;
        box-shadow: 0 0 0 4px red;
      }
      </style>
      </head>
      <body>
          <div class="toggle">
            <label for="toggle1">Check the box to toggle me</label>
            <input type="checkbox" id="toggle1" />
            <span></span>
          </div>
      </body>
      </html>

      CSS Focus - Associated Properties

      Apart from :focus, there are two more pseudo-classes that are associated with the :focus pseudo-class. They are listed in the table given below:
      sr.no
      pseudo-class
      description
      1
      :focus-visible
      Focus is made evident on an element and it is shown to the user.
      2
      :focus-within
      sets focus on the element that contains a focussed element.
      Print Page