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 — Ahmed Gaafer
– Ahmed Gaafer, Commented May 19, 2020 at 2:57

ROOT · Accepted Answer · 2020-05-19 02:09:02Z

2

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>

answered May 19, 2020 at 2:09

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CanUver · Accepted Answer · 2020-05-19 11:04:30Z

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;
}

Collectives™ on Stack Overflow

How can I make border in both checkbox and input?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related