Applying Border to a Checkbox in Chrome

Applying border to a checkbox in Chrome

Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):

input[type=checkbox] {
    outline: 2px solid #F00;
}

Here's the jsFiddle

Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.

For a completely custom styled checkbox, see this jsFiddle from this Gist.

EDIT Play with: outline-offset: 10px;

How do I change the border color of a Checkbox using JavaScript for Google Chrome?

You can create a span element with the border and replace your checkbox element with it.
After that, you append the checkbox back to the span element.

const e1 = document.getElementById('e1');const wrapper = document.createElement('span');wrapper.style.border = '2px solid blue';
e1.replaceWith(wrapper);wrapper.append(e1);

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

How to change checkbox's border style in CSS?

If something happens in any browser I'd be surprised. This is one of those outstanding form elements that browsers tend not to let you style that much, and that people usually try to replace with javascript so they can style/code something to look and act like a checkbox.

Make checkbox in chrome look like one in IE

A really simple way is just to add -webkit-appearance: none;. But you will need to then style the checkbox to match what you want. Here is an example:

http://jsfiddle.net/tzdcbyc5/

<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox" checked>

.checkbox {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid #111;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.checkbox:checked {
    background: url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
    background-size: 100%;
}

css checkbox style for border color

You can put only below css for checkbox border and see Fiddle Demo

CSS:

.error input[type=checkbox] {
  outline: 2px solid #c00;
}

Custom checkbox Working in Chrome and Safari but not Firefox and IE

Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code

CSS: Custom Icon

#checkicons .icon{
    max-width: 90px;
    font-family: Flaticon;
  font-size:50px;
  margin-left: -36px;
  padding: 5px 15px 5px 15px;
  border-radius: 8px;
  line-height: 1.4;
    color: #1e6e11;
  border: solid black;
  background-color: white;
  border-width: 1px;
}

New HTML

<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
    <label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
    <label for="housecare">House Care</label>
</input>

The color handling whether the label should look like checked or not checked is now done with JavaScript.

Javascript: Check Color Handling

function toggleIcon(obj, checkobj){
    if(document.getElementById(checkobj.id).checked){
        document.getElementById(obj).style.color='white';
        document.getElementById(obj).style.backgroundColor='#1e6e11';
    }else{
        document.getElementById(obj).style.color='#1e6e11';
        document.getElementById(obj).style.backgroundColor='white';
    }
}

Thanks Hidden Hobbes for the "inspiration"!

Change the border color of the checkbox and radio button

It simply is not possible. However, there is a workaround where the actual checkbox is made invisible and the styled label is used as an overlay. Looks good and works fine.

More about it here: http://css-tricks.com/the-checkbox-hack/

---

Related Topics