What is the difference between focus and active

Question

What is the difference between the  focus and  active pseudo-classes

User · Accepted Answer

focus and  active are two different states     focus represents the state when the element is currently selected to receive input and   active represents the state when the element is currently being activated by the user    For example let s say we have a  lt button gt   The  lt button gt  will not have any state to begin with  It just exists  If we use Tab to give  focus  to the  lt button gt   it now enters its  focus state  If you then click  or press space   you then make the button enter its   active  state   On that note  when you click on an element  you give it focus  which also cultivates the illusion that  focus and  active are the same  They are not the same  When clicked the button is in  focus active state   An example   x000D   x000D   lt style type  text css  gt  x000D    button   font-weight  normal  color  black    x000D    button focus   color  red    x000D    button active   font-weight  bold    x000D   lt  style gt  x000D     x000D   lt button gt  x000D    When clicked  my text turns red AND bold  lt br   gt  x000D    But not when focused only  lt br   gt  x000D   where my text just turns red x000D   lt  button gt  x000D   x000D   x000D    edit  jsfiddle

User · Answer

Active is when the user activating that point  Like mouse clicking  if we use tab from field-to-field there is no sign from active style  Maybe clicking need more time  just try hold click on that point   focus is happened after the point is activated  Try this     lt style type  text css  gt    input   font-weight  normal  color  black      input focus   color  green  outline  1px solid green      input active   color  red  outline  1px solid red     lt  style gt    lt input type  text   gt   lt input type  text   gt

User · Answer

Focus can only be given by keyboard input  but an Element can be activated by both  a mouse or a keyboard    If one would use  focus on a link  the style rule would only apply with pressing a botton on the keyboard

User · Answer

There are four cases    By default  active and focus are both off  When you tab to cycle through focusable elements  they will enter  focus  without active   When you click on a non-focusable element  it enters  active  without focus   When you click on a focusable element it enters  active focus  active and focus simultaneously     Example    lt div gt    I cannot be focused   lt  div gt    lt div tabindex  0  gt    I am focusable   lt  div gt      div focus     background  green     div active     color  orange     div focus active     font-weight  bold      When the page loads both are in case 1  When you press tab you will focus the second div and see it exhibit case 2  When you click on the first div you see case 3  When you click the second div  you see case 4     Whether an element is focusable or not is another question  Most are not by default  But  it s safe to assume  lt a gt    lt input gt    lt textarea gt  are focusable by default

User · Answer

Using  focus  will give keyboard users the same effect that mouse users get when they hover with a mouse   Active  is needed to get the same effect in Internet Explorer   The reality is  these states do not work as they should for all users  Not using all three selectors creates accessibility issues for many keyboard-only users who are physically unable to use a mouse  I invite you to take the  nomouse challenge  nomouse dot org

User · Answer

focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to     active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it

User · Answer

active       Adds a style to an element that is activated  focus        Adds a style to an element that has keyboard input focus  hover        Adds a style to an element when you mouse over it  lang         Adds a style to an element with a specific lang attribute  link         Adds a style to an unvisited link  visited      Adds a style to a visited link   Source  CSS Pseudo-classes

[css] What is the difference between :focus and :active?

Examples related to css

Examples related to css-selectors

Examples related to pseudo-class