Custom Checkbox / Radio Buttons Focus

Question

I've created Custom Checkbox / Radio using:

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

See: https://codepen.io/abluegem/pen/xxxxqez And: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

Now I'm facing the problem of "focus" state. These buttons don't have focus state. I tried by adding my own CSS but it's not working.

As you can see that the main element/tag is "label" which don't have focus state. And there is input tag but it's hidden.

I wonder if I can have focus state on these buttons.

actually the link that I provided in the question has a working example, but anyhow I have added one more for your ease :-) — Pixel Potter, Oct 05 '19 at 15:05
The custom checkboxes in your example do have a focus state. Its just not visible. What are you trying to do? — Vincent, Oct 05 '19 at 15:36
@Pixel Potter, ok, so you want to see the focus of the (fake)checkbox when the real one is focussed using css? — Vincent, Oct 05 '19 at 15:41
I don't get it why people are so obessed with downvoting. It is a valid question. +1. — Suyash Gupta, Oct 05 '19 at 15:55
@LGSon Well, he is new to the community and he still tried to explain it as properly as he could. He surely would learn with time but if he would be downvoted at the start, he won't be able to improve himself and contribute further. — Suyash Gupta, Oct 05 '19 at 15:58
@Pixel Potter: For clarity and guideline compliance, i added the example code to your question. — Vincent, Oct 05 '19 at 16:12
@LGSon It is also mentioned there **"To improve your chances of getting an answer you should follow the guidelines"**, there is a difference between should and must. Also, he would have improved it if he were just informed in the comments section before getting downvoted. He was not told by anyone that he must paste code in the question itself as he did provide the link of the "minimal reproducible example". My point is "We should try and help people here, not discourage them". — Suyash Gupta, Oct 05 '19 at 16:12
@LGSon I get your point about the external links but we could have too copy the code from that link and pasted in the question and informed him so. But that doesn't happen here. We can find positive in about everything if we actually look. — Suyash Gupta, Oct 05 '19 at 16:44
@PixelPotter -- So you use the `:checked` in `.container input:checked ~ .checkmark:after` to style it, and it didn't occur to try the same with `:focus` ? ... as in `.container input:focus ~ .checkmark:after {...}` A proper research on `:focus` should have given you that answer. — Asons, Oct 05 '19 at 16:49
@Vincent, thank you for improving my question and answering it. I really appreciate this — Pixel Potter, Oct 07 '19 at 02:03

Vincent · Accepted Answer · 2019-10-05T16:23:25.560

5

To set the focus style in the custom checkbox you need to change the style of a different element when the real checkbox has the focus.

Add this css:

    input:focus + .checkmark
    {
      background-color: red;
    }

Reference: focusing on an element changes another's CSS

edited Oct 05 '19 at 16:23

answered Oct 05 '19 at 15:42

Vincent

2,073
1
17
24

Many users here downvote when other user's answer questions that doesn't follow general SO guidelines, and so do I. Since you now made it somewhat proper, I retracted my downvote. The reason is mainly to try keep a reasonable quality level on the posts, and if a question is too bad, any answer on it has no real relation to what is asked, hence not add much value, other than for the one asked it...and that is not what SO is about, to be debugging team for a single user. – Asons Oct 05 '19 at 17:46
If you read [this comment of mine](https://stackoverflow.com/questions/58249463/custom-checkbox-radio-buttons-focus#comment102871139_58249463), you might understand better why I think this is a bad question. – Asons Oct 05 '19 at 18:03
@LGSon fair enough, that actually makes sense to me. – Vincent Oct 05 '19 at 18:26

Custom Checkbox / Radio Buttons Focus

1 Answers1