CODEWITHSUNDEEP
htmlcssgoogle-chrometwitter-bootstrap-3
peter
peter

Reputation: 2103

Display of checkbox in chrome

I've got the following html that I display with cefsharp in a wpf app:

<label><input type="checkbox" class="form-control"/> Steaksandwich</label>

I would like to ask if it is by design that the blue border that appears if the checkbox is active does not stretch around the label as well? This is how the effect looks in my chrome:

effect does not stretch around label

If it is by design, can I somehow change it or remove the effect? If it's not by design, then what am I doing wrong??

Upvotes: 0

Views: 768

Answers (3)

Marcus Abrah&#227;o
Marcus Abrah&#227;o

Reputation: 696

Usually we don't use the class "form-control" in check box. Just remove it and you'll be OK.

Upvotes: 1

Jianov
Jianov

Reputation: 41

That line is added by browser, you can remove it by adding this on your css * - means all elements on the page. I hope it will work 

*{
outline:none;
}

Upvotes: 0

Steve Bennett
Steve Bennett

Reputation: 126305

Try using the for= to create a link between the label and the input:

<input id="mybox" type="checkbox" class="form-control"/>
<label for="mybox"> Steaksandwich</label>

Upvotes: 1

Related Questions