CODEWITHSUNDEEP
htmlcss
Paili
Paili

Reputation: 845

Is it possible to style just focus on tab at checkboxes?

I wonder if it is possible to style just focus on tab (using ↹ to navigate through the page)but not if the user click on the item.

Just like the default behaviour of checkboxes. It gets a blue outline (looks like box-shadow) if I use tab.

Like I want a new red box-shadow/outline on focus by tab but not if the user clicks on the checkbox.

<input id="checkBox" type="checkbox">

Upvotes: 0

Views: 3623

Answers (5)

Ali Qorbani
Ali Qorbani

Reputation: 1263

very simple. you can use :focus for styling elements if you want different style for Clicked on object use :active to style it.

here is an example for <a> tag. 

.click,.focus{
color : red;
text-decoration: none;
}
.click:focus{
outline: none;
color: red;
text-decoration: none;
background-color: #fff;
}
.click:active{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}

.focus:focus{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:active{
outline: none;
color: red !important;
text-decoration: none;
background-color: #fff !important;
}
<a class="click" href="#">Click Me</a><br>
<a class="focus" href="#">Focus me[use Tab]</a>

Upvotes: 0

Takit Isy
Takit Isy

Reputation: 10091

Using the solution from the link I provided you in a comment,
(Input effect on keyboard tab -> focus, but NOT on click)

Here is what I'll do:

var body = document.getElementsByTagName("BODY")[0];

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    body.classList.add('show-focus-outlines');
  }
});

document.addEventListener('click', function(e) {
  body.classList.remove('show-focus-outlines');
});
body.show-focus-outlines input:focus {
  outline: none;
  box-shadow: 0 0 8px 2px red;
}

body:not(.show-focus-outlines) input:focus {
  outline: none;
}
<body>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</body>

Note that I used Javascript only (in the link, that was jQuery),
and tried to render something nice with the CSS.

Hope it helps.

Upvotes: 0

Ander
Ander

Reputation: 788

You could style all possible states of the checkbox:

   input:focus {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);
    }
    input:checked {
      box-shadow: none;  
      /* HIDE OUTLINE - ACCESSIBILITY BAD PRACTICE */
      outline: none;
    }
    <input id="checkBox" type="checkbox">

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16261

you can do it by Jquery

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('#checkBox').addClass('outline');
  }
});

document.addEventListener('click', function(e) {
  $('#checkBox').removeClass('outline');
});
.outline{
 box-shadow: 2px 2px 2px red;
 }
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">

OR
this plugin:https://github.com/ten1seven/track-focus
in css:

body[data-whatinput="keyboard"] #checkBox:focus {
  box-shadow:  0 0 5px red;
}

Upvotes: 1

Naomi
Naomi

Reputation: 1298

Focus will be when you're holding the mouse down on it. If you don't want it when clicked you can use hover instead. 

   input:hover {
      box-shadow: 2px 2px 2px rgba(255,0,0,.5);  
    }
    input:checked {
      box-shadow: none;  
    }
    <input id="checkBox" type="checkbox">

You can also create your own styling by styling the label. check this out https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

Upvotes: 0

Related Questions