html - Change checkbox label css property with checkbox checked -


i have following html:

  <label>      <input type="checkbox" value="cb_val" name="cb_name">      checkbox text   </label>

with css added background-color <label> tag.

label { background-color:#333; color:#fff; }

now i'd liked change background color of label when checkbox checked. know how javascript, there way to using css?

i have seen solutions, use adjacent sibling selector , work when label appears after checkbox.

i still hope fix without javascript, have clue?

update:

as afraid of, cannot done way, must js, or achieve same visual effect different html structure. want set background color of label , textbox in 1 go, can go solution checkbox placed absolute on top of label. point planttheldea!

or can apply background color label , checkbox both.

thanks everyone!

you can achieve pure css so,

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name"> <label for="cb_1">      checkbox text </label>

with css,

label { background-color:#333; color:#fff; }  input[type="checkbox"]:checked + label {     background: brown; }

jsfiddle

keep in mind

the label has after checkbox need style around more keep same had.

here option of styling more have same appearance wanted, new fiddle. not involve positioning absolute, trickery.


Comments

Post a Comment

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

this addentry blog page have made scratch , there underlying problems code particularly clear button supposed clear text entered when button clicked on doesn't work have saved html file problem. also 1 other problem submit button works doesn't pass of text index file have written php , reason whenever click on submit button redirects me index page without posting entry have made. <!doctype html> <html> <head> <script> function message() { alert("clear form?"); } </script> <style> body {background-color: beige;} h1 {color: black;} p {color: black;} textarea { width: 50%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: white; font-size: 16px; resize: none; } div { padding-left: 20px; } </style> </head> <meta charset="utf-8"> <link rel="stylesheet" href="....
Read more

python - Error: Unresolved reference 'selenium' What is the reason? -

# -*- coding: utf-8 -*- selenium import selenium import unittest, time, re class rc(unittest.testcase): def setup(self): self.verificationerrors = [] self.selenium = selenium("localhost", 4444, "*chrome", "http://stackoverflow.com/") self.selenium.start() def test_rc(self): sel = self.selenium sel.open("/") sel.type("id=kw", "selenium") sel.click("id=container") sel.click("id=su") def teardown(self): self.selenium.stop() self.assertequal([], self.verificationerrors) if __name__ == "__main__": unittest.main() this recorded selenium ide, selenium remote control code. in ide test passed.   in pycharm open, first line ( from selenium import selenium ) there error: unresolved reference 'selenium' what reason? my environment is python3.5 selenium3.3.1 selenium-server-standalone-...
Read more

php - Need to store a large amount of data in session with CI 3 but on storing large data in session it is itself destorying automatically -

i working on large web application need database retrieved session instead of database. first time retrieving db , saving session onward calls of data going session. it handling data @ stage when got more data stored in session session got destroyed automatically... "this problem seems similar question says title session destroyed after redirect other pages of site." i got answer questions point here how handle thing when know in future have more data stored inside session, i wanted know little bit more involved answer right in development stage on production when have user 100000 or more how session behave, application behave in same manner did before. kindly discuss me, researching, need corporation more technical in php discussion may solution many of people facing same kind of issues.. you need use native php session because php session stores id in cookie. codeigniter stores data in cookie , problem stuck. so either need use native php sessions...
Read more