CSS entity changes

In the following code all works well except for the MARKS display portion.
I am trying to setup for different entities (checkboxes vs. checkmark AND buttons vs. X/O) displays.

See Idea about ALTERNATIVE marks in code.
I don't know if I'm using the '#cboxToggle' or '.rbtnOnOff' incorrectly in the CSS or HTML.

Could anyone advise me as to what to attempt to change? :)

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title> CSS styling </title>



<style type="text/css">

 fieldset { width: 60%; }

 .hide { display: none; }

 section { display: inline-block; width: 150px; }



 .uncheckedbox:before      { content: "2610"; }

 .checkedbox:before        { content: "2612"; }



 input { opacity: 0; }

 label { font-size: 1.4em; }



/* Checkbox */

 input[type="checkbox"] + label:before         { content: "2610"; font-size:1.4em; color: red; }

 input[type="checkbox"]:checked + label:before { content: "2612"; font-size:1.4em; color: red; }

/* */



/* Alternative checkbox marks  -- DOES NOT WORK YET! */

 #cboxToggle input[type="checkbox"] + label:before         { content: " "; font-size:1.4em; color: red; }

 #cboxToggle input[type="checkbox"]:checked + label:before { content: "2713"; font-size:1.4em; color: red; }

/* */



/* Radio buttons */

 input[type="radio"] + label:before         { content: "26AA"; font-size:1.4em; color: red; }

 input[type="radio"]:checked + label:before { content: "26AB"; font-size:1.4em; color: red; }

/* */



/* Alternative radio button marks  -- DOES NOT WORK YET */

 .rbtnOnOff input[type="radio"] + label:before         { content: "o"; font-size:1.5em; font-weight: bold; color: red; }

 .rbtnOnOff input[type="radio"]:checked + label:before { content: "x"; font-size:1.5em; font-weight: bold; color: red; }

/* */



</style>



</head>

<body>

 <section class="uncheckedbox"> Unchecked Box </section>

 <section class="checkedbox"> Checked Box </section>

 <h1> Entities for CBox / RBtn </h1>



<hr>

<input type="checkbox" id="cbox1"> <label for='cbox1'> CBox 1</label> 

<input type="checkbox" id="cbox2" checked> <label for='cbox2'> CBox 2</label>



<br> Following should have different marks: 

<input type="checkbox" id="cboxToggle" onclick="document.getElementById('links').classList.toggle('hide')">

<label for='cboxToggle'> Toggle </label> 

<div id="links" class="hide"> Toggle Information </div>

<br>



<hr>

<input type="radio" id="rbtn1" name="rbtn"> <label for='rbtn1'> RBtn 1</label> 

<input type="radio" id="rbtn2" name="rbtn" checked> <label for='rbtn2'> RBtn 2</label>



<br> Following should have different marks: 

<input type="radio" id="rbtnON"  name="rbOnOff" onclick="document.getElementById('rbOnOff').classList.remove('hide')">

  <label for='rbtnON'  class="rbtnOnOff"> ON </label> 

<input type="radio" id="rbtnOFF" name="rbOnOff" onclick="document.getElementById('rbOnOff').classList.add('hide')">

  <label for='rbtnOFF' class="rbtnOnOff"> OFF </label> 

<div id="rbOnOff" class="hide"> ON </div>

<hr>



<script>

 // JS not used

</script>



</body>

</html>

برچسب: نویسنده: آیلین رضوانی تاريخ: پنجشنبه 2 آذر 1396 ساعت: 16:25

درباره سایت

آخرین مطالب

امکانات وب

CSS entity changes

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه