Changing radio color material design - html

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

Related

change border color of an element inside the label when radio button is clicked with pure css

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>

CSS Hover / Border Issue

This is the issue I'm having - https://www.awesomescreenshot.com/video/512540?key=604f2d2682f6ef8061da033e213eaa58
I want the hover border to disappear whenever one of the options is selected so there isn't the dual borders look. I've tried a mixture of css and jquery so far, but I still can't seem to get the desired style.
This is my DOM:
<div class="swatch clearfix" data-option-index="0">
<div class="header">Size</div>
<div data-value="Small" class="swatch-element small available">
<input id="swatch-0-small" type="radio" name="option-0" value="Small" checked="">
<label for="swatch-0-small">
Small
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .small').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Medium" class="swatch-element medium available">
<input id="swatch-0-medium" type="radio" name="option-0" value="Medium">
<label for="swatch-0-medium">
Medium
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .medium').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Large" class="swatch-element large available">
<input id="swatch-0-large" type="radio" name="option-0" value="Large">
<label for="swatch-0-large">
Large
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .large').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
This is the CSS I'm currently using:
.swatch-element {
border: solid 2px #a1a1a1;
}
.swatch-element:hover {
border-color: #000;
}
.swatch input:checked + label {
border: solid #000 2px;
}
You could apply all borders to the label, so there would be no double borders, but just a change of border:
.swatch-element label {
border: solid 2px #a1a1a1;
}
.swatch-element:hover label {
border-color: #000;
}
.swatch-element input:checked + label {
border: solid #000 2px;
}

HTML "style" tag doesn't work

I tried the following code in both online editor in w3schools & pen editor in codepen. Here is that code.
body {
background-color: lavenderblush
}
.red-text {
color: red;
}
h1 {
font-family: Tangerine, times new roman;
font-size: 55px;
}
p {
font-size : 18px;
font-family: inconsolata;
} 
.thick-salmon-border {
border-color: salmon;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 120px;
height: 120px;
}
.thick-royalblue-border {
border-color: royalblue;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-green-border {
border-color: green;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-sandybrown-border {
border-color: sandybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-lightpink-border {
border-color: lightpink;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-rosybrown-border {
border-color: rosybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.box {
border-style: solid;
border-color: rosybrown;
border-width: 5px;
}
.AntiqueWhite-box {
background-color: AntiqueWhite;
padding: 20px;
margin: 20px;
}
.MistyRose-box {
background-color: MistyRose;
padding: 20px;
margin: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<h1 class="red-text font-effect-shadow-multiple">My Favorite Songs</h1>
<p>
<img class="smaller-image thick-salmon-border" src="http://cdn3.thr.com/sites/default/files/2015/07/ed_sheeran.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-royalblue-border" src="https://images.genius.com/fc44439c55552eb23d4a9ecb28a21f06.1000x1000x1.jpg " alt="My Favorite Songs">
<img class="smaller-image thick-green-border" src="https://upload.wikimedia.org/wikipedia/en/a/ad/X_cover.png" alt="My Favorite Songs">
</p>
<div class=" box AntiqueWhite-box">
<p>Ed Sheeran</p>
<ul>
<li>Shape of You</li>
<li>Thinking Out Loud</li>
<li>Galway Girl</li>
</ul>
<form action="/submit-Ed Sheeran" id="Ed Sheeran-form">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Ed Sheeran URL">
<button type="submit">Submit</button>
</form>
</div>
<p>
<img class="smaller-image thick-sandybrown-border" src="http://www.hellomagazine.com/imagenes//celebrities/2017080741334/adele-grenfell-tower-victims-screening/0-214-739/adele-t.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-lightpink-border" src="http://netstorage.metrolyrics.com/albums/2777347adele-21.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-rosybrown-border" src="https://i.pinimg.com/736x/a9/95/9c/a9959c17c8260650136fdc4a7d8bb218--adele-in-concert-adele--album.jpg" alt="My Favorite Songs">
<p>
<div class="box MistyRose-box">
<p>Adele</p>
<ul>
<li>Rolling In the Deep</li>
<li>Someone Like You</li>
<li>Hello</li>
</ul>
<form action="/submit-Adele" id="Adele">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Adele URL">
<button type="submit">Submit</button>
</form>
</div>
BTW, I ran this in "Edge" browser in windows. What's wrong?
This code worked fine until yesterday, but now css doesn't work. Did something change in w3schools or codepen? Is there a type-o? Please help.
First : Use head taq(required):
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
</style>
</head>
Second : Use style code like this (not required) :
<style type="text/css" media="screen">
</style>
Third : Put ; in end of your css code(in end of line 6) (not required):
body {
background-color: lavenderblush;
}
I hope second and third help you .
:)
It might be a hunch, but you said it worked until yesterday. Try clearing your
browser cache.
https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history
Hope this helps!
It's working correctly on my side in codepen.
you should try to hard refresh(ctrl+F5)
OR
Clear cache and cookies then load the page
OR
Try a hardcore versioning e.g. add ?1 or any thing after ? in URL and then hit URL.
e.g.
http://<your URL>.html?1
The best practice is to use styles and scripts in <head > tag as it'll be loaded before the page and you'll see the design at its best. If it doesn't get solved then above solution will work if it's cache related issue.
Use Style in <head>
You mistake is a semicolon in your body tag background-color property
body{
background-color: lavenderblush;
}

give image a border if radio button is checked

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>

Showhide CSS not working on Wordpress

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.