How can I make border in both checkbox and input?

Question

input {
  border: 5px solid blue;
}

<div>
  <h1>Grocery List</h1>
  <ul>
    <li>Eggs <input type="checkbox" checked></li>
    <li>Apples <input type="checkbox" checked></li>
    <li>Bananas <input type="checkbox"></li>
  </ul>
</div>

<div>
  <input type="text" name="itemNum"><label>Item Number</label>
  <input type="text" name="itemName"><label>Item</label>
</div>

I want to make checkbox and input have a border. So I wrote like this but it only makes a input border not checkbox. How can I have checkbox border as well? And why it does not work this way?

Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) — Ahmed Gaafer, May 19 '20 at 02:57

score 2 · Accepted Answer · answered May 19 '20 at 02:09

I believe that would be impossible for for checkbox border, browser still don't provide a way to do it in CSS, but here is a trick that you can apply using outline CSS attribute, note that border is still there:

input {
  outline: 5px solid blue;
}

<div>
  <h1>Grocery List</h1>
  <ul>
    <li>Eggs <input type="checkbox" checked></li>
    <li>Apples <input type="checkbox" checked></li>
    <li>Bananas <input type="checkbox"></li>
  </ul>
</div>

<div>
  <input type="text" name="itemNum"><label>Item Number</label>
  <input type="text" name="itemName"><label>Item</label>
</div>

score 2 · Answer 2 · answered May 19 '20 at 11:04

Checkbox inputs come fixed with scanners and you can't style them. as ROOT said, You can give them an outline feature.

If you want to change styles, you can use the before feature, not directly on the checkbox. so if you want to change the properties of a checkbox, you must use the "befor-after" pseudo selectors. That's where I made an example for you. I know it doesn't look very good, but it might give you an idea.

  input[type=checkbox]:before {
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

color: black !important;
}

How can I make border in both checkbox and input?

2 Answers2