Firefox label element border cut off with position relative

Question

I have some custom check boxes that I am working with. When you select them the focus class gets added to them. When that happens a border appears around it. For most browsers the border appears like a square around the label element. Though in firefox the left border gets cut off. If you remove position relative this correct the issue. Though I do not want to do that for positioning purposes. I created a dumbed down example here:

http://jsfiddle.net/g617z4qk/3/

Notice when you look in firefox how it looks different then chrome. How can I make firefox behave like chrome?

here is the html code:

<div class="textContainter">
  <label class="input-control checkbox focus">"
     <input id="classAll" class="classAll input-control" type="checkbox" name="status" value="Item 1" tabindex="-1" checked="checked" />
     <span class="input-control-img"></span>
     <span class="input-control-text">test Item 1</span>
   </label>
</div>

Here is the CSS

label.input-control {
    display: inline-block;
}
.textContainter .focus {
    outline: 1px dotted !important;
 }
.input-control, .input-control .input-control-body {
   position:relative;
 }

 label.input-control input {
    left: -9999px;
    position: absolute;
 }

 label.input-control.checkbox .input-control-img {
    background-image: url("http://blogs.digitss.com/wp-      content/uploads/2010/04/fancy-radio-checkbox.png");
 }
 label.input-control .input-control-img {
   background-position: 0 0;
   background-repeat: no-repeat;
   width: 20px;
 }
 label.input-control span {
  cursor: pointer;
  float: left;
  height: 20px;
 }

score 1 · Accepted Answer · answered Mar 18 '15 at 01:06

This positioning of the input elements to the far left

label.input-control input {
    left: -9999px;
    position: absolute;
 }

makes the label outline expand to the left as well (at least in Firefox).

Simply adding overflow:hidden for the label elements should fix that:

label.input-control {
    display: inline-block;
    overflow: hidden;
}

http://jsfiddle.net/g617z4qk/5/

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

This is a workaround. Replace the outline with border and it works fine on both the browsers you have mentioned.

This issues seems to be a duplicate of CSS "outline" different behavior behavior on Webkit & Gecko

The JSfiddle for the workaround is border: 1px dotted; http://jsfiddle.net/g617z4qk/4/

edited May 23 '17 at 10:24

Community

1
1

answered Mar 18 '15 at 00:44

darkknight

363
1
8

Firefox label element border cut off with position relative

2 Answers2