CODEWITHSUNDEEP
htmlcss
Uncle Kracker
Uncle Kracker

Reputation: 45

Margin CSS not taking affect to checkbox element

Hey guys I'm a little confused to why the margin CSS I am applying to my checkbox element isn't working. Here is an example of my code:

HTML:

<div class="panel">
         <input id="bodytype-checkbox" class="float-checkbox" type="checkbox"/>
         <label for="bodytype-checkbox" class="label-checkbox">Bodytype</label>
</div>

CSS:

.float-checkbox{
    float:left;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

Any idea what I'm doing wrong? Here is the fiddle: http://jsfiddle.net/LvhCh/38/

Upvotes: 2

Views: 10299

Answers (6)

Pixelomo
Pixelomo

Reputation: 6737

try this 

input.float-checkbox{
    float:left;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

Upvotes: 1

Sander Koedood
Sander Koedood

Reputation: 6347

The reason it doesn't work is that your CSS is overwritten by the bootstrap css. This means you have to overrule their CSS. You can do this in multiple ways.

1) Add the element type in front of your CSS: input.float-checkbox

2) Add another class in front of your CSS: .panel .float-checkbox

Upvotes: 0

ebriggs
ebriggs

Reputation: 1216

It looks like bootstrap.css is a little more specific when styling checkboxes.

input[type=radio], input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

and it's overriding yours.

Upvotes: 8

karan3112
karan3112

Reputation: 1867

By default the checkbox is using bootstraps.css margin. To override this use a more specific css selector. Use the below css

input[type=checkbox].float-checkbox{
  float:left;
  margin: 10px 10px 0 0;
 cursor: pointer;
}

Upvotes: 1

gsiradze
gsiradze

Reputation: 4733

you need to add input in the start of class JSFIDDLE

Upvotes: 0

JRulle
JRulle

Reputation: 7568

Out the margin on the label... CSS can act a little funny on checkboxes and other form elements.

label { margin-left: 10px; }

DEMO

Upvotes: 0

Related Questions