October 1st, 2014

Playing around with styling checkboxes.

http://jsbin.com/rugonu/edit

42° N , 71° E

Also on Twitter

Reply Retweet Favourite

Responses

Andre Torgal

@adactio .toggle span::before { content: “enable”; } .toggle input:checked + label span::before { content: “enabled”; }

Nick Colley

@adactio I like (-webkit-)user-select: none; on things like that so it prevents highlighting. or maybe you could use label::selection {}

# Posted by Nick Colley on Wednesday, October 1st, 2014 at 8:07pm

Nick Colley

@adactio and style the selection to be invisible so a user can still copy and paste the text.

# Posted by Nick Colley on Wednesday, October 1st, 2014 at 8:07pm

Jason R

@adactio I know it was a while ago, but is there a way to toggle the text too?

# Posted by Jason R on Wednesday, October 1st, 2014 at 10:11pm

Pete Ottery

@adactio (cont) me knowing nothing about js, do u think its possible to achieve something similar with no js (css-only) like yours?

# Posted by Pete Ottery on Wednesday, October 1st, 2014 at 10:39pm

Jeremy Keith

@c41 The clicking action, yes. The dragging, no. (pretty sure that would require JavaScript)

3 Shares

# Shared by Jason Zipperer on Wednesday, October 1st, 2014 at 8:06pm

# Shared by Lukas Majzlan on Wednesday, October 1st, 2014 at 8:59pm

# Shared by Enrique Rodriguez on Wednesday, October 1st, 2014 at 9:04pm

22 Likes

# Liked by Matthew Koyak on Wednesday, October 1st, 2014 at 8:48pm

# Liked by Davi Ferreira on Wednesday, October 1st, 2014 at 8:48pm

# Liked by Chris A. on Wednesday, October 1st, 2014 at 8:48pm

# Liked by Mircea Piturca on Wednesday, October 1st, 2014 at 8:48pm

# Liked by Alper on Wednesday, October 1st, 2014 at 8:48pm

# Liked by Morgan Faichney on Wednesday, October 1st, 2014 at 8:59pm

# Liked by Peter Grucza on Wednesday, October 1st, 2014 at 9:00pm

# Liked by Tommy Sanchez on Wednesday, October 1st, 2014 at 9:00pm

# Liked by Paul ⓦ on Wednesday, October 1st, 2014 at 9:01pm

# Liked by Karl Stolley on Wednesday, October 1st, 2014 at 9:17pm

# Liked by richard  on Wednesday, October 1st, 2014 at 9:17pm

# Liked by Joschi Kuphal 吉 on Wednesday, October 1st, 2014 at 9:18pm

# Liked by Ant Wills on Wednesday, October 1st, 2014 at 9:26pm

# Liked by Marc Stalfoort on Wednesday, October 1st, 2014 at 9:27pm

# Liked by Aaron Rose on Wednesday, October 1st, 2014 at 9:36pm

# Liked by Fredrik Frodlund on Wednesday, October 1st, 2014 at 9:47pm

# Liked by Daniel Newns on Wednesday, October 1st, 2014 at 10:12pm

# Liked by Anatoly Geyfman on Wednesday, October 1st, 2014 at 10:12pm

# Liked by Juan Fernandes on Wednesday, October 1st, 2014 at 10:21pm

# Liked by Sophia on Wednesday, October 1st, 2014 at 10:21pm

# Liked by Fabian Liehret on Thursday, October 2nd, 2014 at 1:25am

# Liked by Denise on Thursday, October 2nd, 2014 at 9:41am

Have you published a response to this? :