Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

[Demo] Making Sexy Checkboxes

I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.

http://jsfiddle.net/2gyzx01v/10/

It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.

Feedback welcomed.
Get a signed message before dealing: Keybase
Still here sometimes.
(Jan 18, 2015 04:13 AM)Crypto™ Wrote:  I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.

http://jsfiddle.net/2gyzx01v/4/

It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.

Feedback welcomed.

Hello Crypto™,

Nice work mate! I'm sure that these checkboxes will be useful for members that struggle with CSS.

Keep up the good work and I look forward to further projects.

Kind Regards,
- Dan (The Old Knight).
[Image: Ez0fqDg.png]
I think it looks pretty good. A small part of me was dying though when I saw that the checkboxes weren't aligned to the text.
One suggestion I have is adding a font-size, but that's just one option.

Code
label > span {
    display: inline-block;
    padding-left: 6px;
    margin: 0 auto;
    text-align: center;
    font-size: 19px; /* suggestion */
}
(Jan 18, 2015 04:37 AM)Willful Wrote:  I think it looks pretty good. A small part of me was dying though when I saw that the checkboxes weren't aligned to the text.
One suggestion I have is adding a font-size, but that's just one option.

-snip-

I just added a font-size. I had it in initially, but I couldn't figure out why it wasn't working. It turns out I had a semicolon instead of a colon xD

Now it's all even I think.
Get a signed message before dealing: Keybase
Still here sometimes.
These are brilliant Crypto. Great work, I'll be playing around with some of the values in here for sure.
These are really nice, great work.

I might use them in the future and will be sure to give credit.
I really like these, but I will suggest that the transition is a little too slow... That's just a minor suggestion 🤝
Workin' tryin' to make another dolla
This makes the UI designer in me smile, it's nice to see you expanding your horizons and doing something a little different for a change ^_^ one tip though, rather than using a font-size to align text to look good alongside another element, use inline-block elements and vertical-align: middle instead! This way, your checkboxes will look great at any font size.
(Jan 18, 2015 04:13 AM)Crypto™ Wrote:  I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.

http://jsfiddle.net/2gyzx01v/5/

It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.

Feedback welcomed.

These are awesome! I will definetly use those, if I can? Lmao

Thanks for the conteibution to the forum.
(Jan 18, 2015 03:01 PM)Edward Kenway Wrote:  These are awesome! I will definetly use those, if I can? Lmao

Thanks for the conteibution to the forum.

No >:c You can look, but not touch. x3 I'm kidding. Help yourself.

(Jan 18, 2015 02:51 PM)~Dec Wrote:  This makes the UI designer in me smile, it's nice to see you expanding your horizons and doing something a little different for a change ^_^ one tip though, rather than using a font-size to align text to look good alongside another element, use inline-block elements and vertical-align: middle instead! This way, your checkboxes will look great at any font size.

I completely forgot that was a thing :D I enjoy expanding my horizons. Especially since I do want to go full stack someday, enough to actually make a decent UI that doesn't make people cringe. :)
Get a signed message before dealing: Keybase
Still here sometimes.
I think this is quite good. Perhaps a few members can go and make certain things like this to help users out!

I'd love to learn more about forms, I hardly ever use/make forms. :L
(Jan 19, 2015 09:25 PM)Webmasters Wrote:  I think this is quite good. Perhaps a few members can go and make certain things like this to help users out!

I'd love to learn more about forms, I hardly ever use/make forms. :L

It's nice since most forms look ugly as hell by default, so being able to make them look more aesthetically pleasing while maintaining usability. (It's not hard to make something that looks super cool, but is completely unusable to the normal end user) I might actually make a full CSS kit for forms at some point.
Get a signed message before dealing: Keybase
Still here sometimes.
(Jan 19, 2015 09:32 PM)Crypto™ Wrote:  It's nice since most forms look ugly as hell by default, so being able to make them look more aesthetically pleasing while maintaining usability. (It's not hard to make something that looks super cool, but is completely unusable to the normal end user) I might actually make a full CSS kit for forms at some point.

This. This x10000 times please Crypto.
(Jan 20, 2015 07:00 AM)kawaii Wrote:  This. This x10000 times please Crypto.

I'll work on it once I finish what I'm currently working on :)

I just added a separate example for both radios and checkboxes.
Get a signed message before dealing: Keybase
Still here sometimes.
Looks really nice. Keep up the good work!


Possibly Related Threads...
Thread / Author Replies Views Last Post
by HotTunaCanSandiwchJan 19, 2020 09:00 PM 2 92 Jan 19, 2020 09:00 PM
Last Post: al5ina5
[MyBB] by S Malkiq SamMar 8, 2016 06:31 PM 3 92 Mar 8, 2016 06:31 PM
Last Post: Wires
by ExaNetAug 21, 2013 12:34 AM 10 167 Aug 21, 2013 12:34 AM
Last Post: ExaNet