I am trying to change a border color for a span element when the radio button is checked. But my code is not working.
Here's a simpler version of my code:
.try-2 {
border-left: 3px solid pink;
padding-left: 5px;
}
input[type="radio"]:checked .try-2 {
border-left: 3px solid blue;
}
<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>
Your issue is, that span is not the sibling of the input. The sibling of the input is the label. You have to change your selector to: input[type="radio"]:checked ~ label span
.try-2 {
border-left: 3px solid pink;
padding-left: 5px;
}
input[type="radio"]:checked ~ label span {
border-left: 3px solid blue;
}
<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>
I need to change the material css radio button color (with gap type to orange)
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
.with-gap[type="radio"].filled-in:checked + label:after{
border: 2px solid #ff9800;
background-color: #ff9800;
}
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>
put this
[type="radio"].with-gap:checked+label:after {
background-color: orange !important;
}
and here is example
I know this is an old question but I recently ran into a similar issue with Materialize radio button coloring. I was creating a survey form with pass, fail, not checked and not applicable inputs and needed the four radio buttons to be different colors. I added an extra class to each span and targeted this class from the CSS to override Materialize's standard styling. I was happy with the pass selector being the standard materialize green.
HTML:
<label>
<input type="radio" id="answer_1" name="answer_1" value="Pass"/>
<span class="span-pass">Pass</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="Fail"/>
<span class="span-fail">Fail</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NC"/>
<span class="span-nc">Not Checked</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NA"/>
<span class="span-na">Not Applicable</span>
</label>
CSS:
[type="radio"]:checked+span.span-fail:after, [type="radio"].with-gap:checked+span.span-fail:after {
background-color: red;
border: 2px solid red;
}
[type="radio"]:checked+span.span-nc:after, [type="radio"].with-gap:checked+span.span-nc:after {
background-color: orange;
border: 2px solid orange;
}
[type="radio"]:checked+span.span-na:after, [type="radio"].with-gap:checked+span.span-na:after {
background-color: #555;
border: 2px solid #555;
}
Hope this is of some help to someone out there.
try this i hope it will work
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::after {
background-color: rgb(255, 138, 6) !important;
}
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::before, [type="radio"].with-gap:checked + label::after {
border: 2px solid rgb(255, 138, 6) !important;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<style>
</style>
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>
</body>
</html>
Use below style for inner-dot of radio button:
.with-gap[type="radio"]:checked+label:after{
background-color: #ff9800;
border-color: #ff9800;
}
Use below style for the outer-border of radio button:
.with-gap[type="radio"]:checked+label:before{
border-color: #ff9800;
}
Hope it helps.
Try with the below CSS
input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after{
background-color: #ff9800;
}
input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after {
border: 2px solid #ff9800;
}
red color
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
background-color:rgb(255, 0, 0);
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before,
[type="radio"].with-gap:checked+span:after {
border: 2px solid rgb(255, 0, 0);
}
HTML
<label>
<input class="with-gap radio-blue" name="group1" type="radio" checked />
<span>Test</span>
</label>
SASS
.radio-blue.with-gap:checked+span:not(.lever):after
border: 2px solid #536dfe
background-color: #536dfe
.radio-blue.with-gap:checked+span:not(.lever):before
border: 2px solid #536dfe
I want to give an image a border if a radio button is checked.
This is the HTML syntax:
<div class="frm_radio">
<label for="field_n9r1a2-0">
<input type="radio" name="x" id="t" value="Betreuung">
Betreuung
<img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
</label>
</div>
I try it with CSS selector :checked but it doesn't work.
input[type=radio]:checked img {
border: 2px solid red;
}
Can somebody explain how I can solve it?
You need to add a ~ (sibling) operator:
input[type=radio]:checked ~ img {
border: 2px solid red;
}
Without the ~ it treats as radio button being the parent of img. If you didn't have any text, I would have suggested +.
input[type=radio]:checked ~ img {
border: 2px solid red;
}
<div class="frm_radio">
<label for="field_n9r1a2-0">
<input type="radio" name="x" id="t" value="Betreuung">
Betreuung
<img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
</label>
</div>
How can I use a div as radio button ?
I mean that :
you can select a div and then it is bordered blue
you can only select one of them
If you want a CSS Only solution, this is an excellent one :
.labl {
display : block;
width: 400px;
}
.labl > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
cursor:pointer;
border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
background-color: #ffd6bb;
border: 1px solid #ff6600;
}
<label class="labl">
<input type="radio" name="radioname" value="one_value" checked="checked"/>
<div>Small</div>
</label>
<label class="labl">
<input type="radio" name="radioname" value="another" />
<div>Small</div>
</label>
Inspired by this answer
Yes, you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
});
.radio-group{
position: relative;
}
.radio{
display:inline-block;
width:15px;
height: 15px;
border-radius: 100%;
background-color:lightblue;
border: 2px solid lightblue;
cursor:pointer;
margin: 2px 0;
}
.radio.selected{
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
<div class="radio-group">
<div class='radio' data-value="One"></div>1
<div class='radio' data-value="Two"></div>2
<div class='radio' data-value="Three"></div>3
<br/>
<input type="text" id="radio-value" name="radio-value" />
</div>
</form>
This is a simple solution.
HTML
<div class="option first">1</div>
<div class="option second">2</div>
<div class="option third">3</div>
<div class="option fourth">4</div>
CSS
.option
{
background-color:red;
margin: 10px auto;
}
.option.active
{
border:1px solid blue;
}
Jquery
$(document).ready(
function()
{
$(".option").click(
function(event)
{
$(this).addClass("active").siblings().removeClass("active");
}
);
});
link
I've got this piece of CSS/HTML code that works good on jsfiddle and when I do a test.html on my browser but when I try to use it on a wordpress page (style in style.css and html on the page) just does not work.
I checked all the possibilities I could, there is no overwriting from the style, no browser problem... little help?
This is the test site:
http://manuscript.bugs3.com/
https://jsfiddle.net/1zeatcxp/
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 80%;
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
<label for="show">
<div class="showthis">
<span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>
It looks like your HTML is being mangled by the wordpress editor, this is what I see on your page:
<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
<p>Content</p>
</div>
As you already discovered, remove_filter ('the_content', 'wpautop'); is the correct way to deal with this problem. You must make sure to place this in the functions.php file of your theme.
Edit:
Try it with the following HTML:
<label for="show"><span class="showthis">[Show]</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</div>
You should not be nesting block-level divs inside of label elements. It is not valid HTML, see https://stackoverflow.com/a/18609649/2126792.