CODEWITHSUNDEEP
htmlcsscheckbox
JustTrying
JustTrying

Reputation: 121

css only checkbox (with content attribute)

how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.

Thanks.

reedit

OK, after LOT of copy/paste/delete, it work now.

Thank.

Upvotes: 5

Views: 20855

Answers (4)

Zoltan Toth
Zoltan Toth

Reputation: 47667

input[type=checkbox] {
    position: relative;
    visibility: hidden;
    cursor: pointer;
}

input[type=checkbox]:after {
    display: block;
    content: "OFF";
    position: absolute;
    top: 0;
    right: -30px;
    visibility: visible;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
    border-radius: 4px;
    background: #d00;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

input[type=checkbox]:checked:after {
    content: "ON";
    background: #0a0;
}
<input type="checkbox" />

Upvotes: 15

Zendy
Zendy

Reputation: 1684

It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.thecssninja.com/css/futurebox3

http://www.thecssninja.com/css/css-tree-menu

Upvotes: 1

joncodo
joncodo

Reputation: 2328

I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.

What makes you not want to use javascript?

Upvotes: 0

Wes Foster
Wes Foster

Reputation: 8900

Creating an actual element with CSS isn't possible. You can however style a checkbox using css.

An example:

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

Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.

Upvotes: 0

Related Questions