0

I have created a custom checkbox, all works fine. I would like to know if there's an option to style\manipulate the content or background attribute. I used a custom tick sign but it sits too much at the bottom, how can I raise it several pixels up?
Desired result:

enter image description here
JSfiddle

HTML:

        <input type='checkbox' value='valuable4' id="valuable4"/>
        <label for="valuable4">
            <span></span>
        </label>

CSS:

input[type=checkbox] {
    visibility: hidden;
}

label span
{
    height: 25px;
    width: 25px;
    position: absolute;

    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
    content: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    height: 25px;
    width: 25px;
    cursor: pointer;
     border: 1px solid red;
}
Alex
  • 1,982
  • 4
  • 37
  • 70
  • possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) – MeanGreen May 20 '15 at 10:19
  • I think you mean to use `background:` instead of `content:` – jbutler483 May 20 '15 at 10:20
  • No. I already styled the checkbox, I need to style one specific attribute of it. It doesnt matter, `content` or `background`, I still need to raise that element few pixels up. – Alex May 20 '15 at 10:20
  • `span` elements don't have `content` properties as such, pseudo-elements do.[**content @ MDN**](https://developer.mozilla.org/en/docs/Web/CSS/content) – Paulie_D May 20 '15 at 10:24
  • OK, how can I style\move\manipulate the `background` property? – Alex May 20 '15 at 10:26

2 Answers2

1

Now this should be exactly what you are looking for. You can safely omit the <span>, it is not needed.

input[type=checkbox] {
    display: none;
}
label {
    height: 25px;
    width: 25px;
    position: absolute;
    display: block;
    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label {
    border: 1px solid red;
}
input[type=checkbox] + label:after {
    background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    background-size: cover;
    content:" ";
    display: block;
    opacity: 0;
    height: 30px;
    transition-duration: 0.2s;
    width: 30px;
    position: relative;
    right: -4px;
    top: -8px;
}
input[type=checkbox]:checked + label:after {
    opacity: 1;
}

http://jsfiddle.net/39qkjs6k/5/

What's happening here? Basically, you create a pseudo element (which is available on most html elements) :after which you apply the background to (this replaces the <span> you used before). You position it relatively inside its parent <label> right: -4px; top: -8px;. With the checkbox unchecked, it has opacity: 0;, so it's fully transparent, making it invisible. Next to a :checked checkbox, it gets opacity: 1;, making it fully visible. The transition-duration: 0.2s; makes sure that all changes in transitionable properties is being done in a smooth animation rather than just abruptly changing.

connexo
  • 53,704
  • 14
  • 91
  • 128
1

I think you need this as a pseudo-element and the label.

You can use the label as the base state of the 'checkbox` and then apply a pseudo-element on top of the label using absolute positioning.

The pseudo-element can be moved into the right position by using the top/left values as required

label {
    height: 25px;
    width: 25px;
    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
    position: relative;
    display: inline-block;
}
input[type=checkbox]:checked + label::before {
    position: absolute;
    content:'';
    background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    top:-8px;
    left:8px
}


input[type=checkbox] {
  visibility: hidden;
}
label {
  height: 25px;
  width: 25px;
  left: 107px;
  cursor: pointer;
  border: 1px solid lightblue;
  position: relative;
  display: inline-block;
}
input[type=checkbox]:checked + label {
  border-color: Red;
}
input[type=checkbox]:checked + label::before {
  position: absolute;
  content: '';
  background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  top: -8px;
  left: 8px
}
<input type='checkbox' value='valuable4' id="valuable4" />
<label for="valuable4">
</label>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thanks. Could you please explain what exactly you've added to the existing code and how it affected the final result? – Alex May 20 '15 at 10:41
  • 1
    Added a brief explanation. You really don't need the span at all...especially since it's empty. – Paulie_D May 20 '15 at 10:44