{"id":3025,"date":"2016-12-21T15:49:29","date_gmt":"2016-12-21T21:49:29","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2036"},"modified":"2016-12-21T15:49:29","modified_gmt":"2016-12-21T21:49:29","slug":"how-to-add-a-highlight-effect-to-checked-input-field","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-add-a-highlight-effect-to-checked-input-field\/","title":{"rendered":"How to Add a Highlight Effect to Checked Input Field"},"content":{"rendered":"

This tutorial shows you an easy way to add a highlight effect to an input field that has been checked by the user. Not only is this a cool and different way to add some style to your sites, but it also improves user experience by making it pretty impossible for the user to accidentally check something they didn’t mean to.<\/p>\n

Assuming your HTML looks something like this with an input field and a label tag:<\/p>\n

<<\/span>input<\/span> id<\/span>=\"checkbox1\"<\/span> type<\/span>=\"checkbox\"<\/span> \/><\/span>
\n<<\/span>label<\/span> for<\/span>=\"checkbox1\"<\/span>>Checkbox Label Text<\/span><\/<\/span>label<\/span>><\/span><\/code><\/p>\n

Then your CSS to add a highlighted effect to the label of any checkbox input that’s been checked should look like this:<\/p>\n

input:checked + label{\n background: #e7f478; \n}<\/pre>\n
\"Screen<\/p>\n
As always, your choice of color that you use for the highlight effect is completely up to you, and this code can be customized completely to your liking.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
This tutorial shows you an easy way to add a highlight effect to an input field that has been checked by the user. Not only is this a cool and different way to add some style to your sites, but […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2792,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3025"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3025"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3025\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2792"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}