CODEWITHSUNDEEP
javascriptjqueryhtmlcssradio-button
user8444404
user8444404

Reputation:

Change Font color onclick Radio buttons

We are displaying text & two radio buttons in page....

Once we click on Radio buttons, we are changing background color of page according to radio button....

Requirement :

Instead of Background color, i want to change the text color onclick radio button....

I tried below , but it did't worked : 

.orange input:checked ~ .text {
  color: #F4511E;
}

Code Snippet

html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}

.orange input:checked ~ .layer {
  background: #F4511E;
}

.amber input:checked ~ .layer {
  background: #FFB300;
}
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

Upvotes: 1

Views: 2715

Answers (4)

Nisharg Shah
Nisharg Shah

Reputation: 19542

You need to use JS/jQuery for this because > + ~ this are siblings selector so it only select item that are next to it

+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector

UPDATED PEN

$('input[type="radio"]').on('click', function() {
    let color = $(this).parent().find('div.button span').css('background-color');
    $('.text').css('color', color);
});
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}

/* .orange input:checked ~ .layer {
  background: #F4511E;
}

.amber input:checked ~ .layer {
  background: #FFB300;
} */
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Upvotes: 2

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Use below jQuery using siblings

$('input[type="radio"]').change(function () {
  if($(this).is(":checked") && $(this).val() == 'amber'){
    $(this).parent().siblings('div.text').css('color', '#FFB300');
  }
  else{
    $(this).parent().siblings('div.text').css('color', '#F4511E');
  }
});
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

Upvotes: 1

Anandhukrishna VR
Anandhukrishna VR

Reputation: 279

Updated answer is here

function myColour(clr)
{
alert(clr);
if(clr == 'orange')
   document.getElementsByClassName("text")[0].style.color = '#F4511E'
  else if(clr == 'amber')
      document.getElementsByClassName("text")[0].style.color = '#FFB300'
     else
       document.getElementsByClassName("text")[0].style.color = 'black'
}
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input onclick="myColour('orange')" type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input onclick="myColour('amber')" type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

Upvotes: 0

Joscha
Joscha

Reputation: 240

You need jQuery/js for that - This is a Solution with jQuery:

$(document).ready(function() {
    var text = $('.text')
    $('input:radio').change(function() {
        if ($(this).is(':checked')) {
            var color = $(this).val();
            text.css('color', color);
        }
    });
});

Fiddle here: http://jsfiddle.net/tpq16r5L/4/

Alos please be aware that amber is no usable color, so I changed that for exemplary usage to green

Upvotes: 0

Related Questions