I am currently creating a form in Wordpress using gravity forms and an image plugin, that allows me to insert images instead of radio buttons. However, I would like the image to change when the radio button is checked. My issue is that I have no idea how to approach this, and how can I target the background-image when it is directly styled in the HTML?
<div class='ginput_container ginput_container_radio'>
<ul class='gfield_radio' id='input_1_2'>
<li class='gchoice_1_2_0'><input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' /><label for='choice_1_2_0' id='label_1_2_0'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image1.com)"><img src="http://image1.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_1'><input name='input_2' type='radio' value='' id='choice_1_2_1' tabindex='2' /><label for='choice_1_2_1' id='label_1_2_1'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image2.com)"><img src="http://image2.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
<li class='gchoice_1_2_2'><input name='input_2' type='radio' value='' id='choice_1_2_2' tabindex='3' /><label for='choice_1_2_2' id='label_1_2_2'><span class="image-choices-choice-image-wrap" style="background-image:url(http://image3.com)"><img src="http://image3.com" alt="" class="image-choices-choice-image" /></span><span class="image-choices-choice-text"></span></label></li>
</ul>
</div>
I would highly appreciate any help I can get to solve this issue.
Let me know if you need further information, thanks
You could be more specific on which image you want to change and from which radio button do you want to trigger the event. But still I'll give it a shot.
<input name='input_2' type='radio' value='' id='choice_1_2_0' tabindex='1' />
<div class="image-choices-choice-image-wrap" style="background-image:url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/d1ea2d6f6d1aa470f661fa661bd0e2fb14fd2d2c/medium-886981758498052b0532dc3a96b98adf.jpg);height:200px;width:400px">
<script>
$('#choice_1_2_0').click(function(){
// If radiobuton is checked
if ($(this).is(':checked'))
{
// Change background image
$('.image-choices-choice-image-wrap').css("background-image", "url(https://cdn.kimkim.com/files/a/content_articles/featured_photos/7a4f69e48562c9adbee4f090033454a8ab23c135/medium-e5cbb5b7a25c93f53245e256729efff8.jpg)");
}
});
</script>
Don't forget to add jQuery if you already haven't
Live Demo: https://jsfiddle.net/jvh6xvzs/12/
The generic form is:
input + label { /* css for unchecked state */ }
input:checked + label { /* css for checked state */ }
input { display: none; }
input {
display: none;
}
input + label { background-color: red; }
input:checked + label { background-color: black; color: white ; }
<input id=option1 type=radio name=dd checked><label for=option1>select</label>
<input id=option2 type=radio name=dd><label for=option2>select 2</label>
I ended up using the guide from:
https://css-tricks.com/override-inline-styles-with-css/
The plugin added the class .image-choices-choice-selected when the radio button was checked. Therefore i used following code to do the trick:
.image-choices-choice-selected #label_1_2_2 span[style] {
background-image:url(http://newimage1.com) !important;
}
Thanks for the suggestions, I guess if this class was not added, I could have used jQuery.
Related
We have built an html form which contains basic stuff with input and option fields. This works good!
Then we have some fields to choose an option:
<h2 class="space">Franchise</h2>
<div class="spa2">
<p option value="300" data-value="300" class="s2">300</p>
<p option value="500" data-value="500" class="s2 selected">500</p>
<p option value="1000" data-value="1000" class="s2">1000 </p>
<p option value="1500" data-value="1500" class="s2">1500</p>
<p option value="2000" data-value="2000" class="s2">2000 </p>
<p option value="2500" data-value="2500" class="s2">2500</p>
</div>
This displays buttons are to choose specific values, but respective data is not transferred with POST because there are some non-html form type fields.
Is there a way to cheat and tell that this are form fields without change anything?
The code displays this buttons here:
Change them into <form> elements
You're asking the wrong question. This look can be achieved with form elements, which is easier and more reliable than "cheating".
HTML
<form>
<input id="one" type="radio" name="choices" />
<label for="one">300</label>
<input id="two" type="radio" name="choices" />
<label for="two">500</label>
<input id="three" type="radio" name="choices" />
<label for="three">1000</label>
</form>
This example consists of radio inputs. Use this if there is only one choice, otherwise make the type checkbox if you can have multiple choices.
The label should follow the input so that the corresponding label can be styled when the input is checked.
The label is connected to its corresponding radio input with the matching for and id attributes.
The radio input options are linked with the same name="choices" and only one option can be selected.
CSS
input[type=radio] {
display: none;
}
input[type=radio] + label {
padding: 10px;
border: solid 1px;
cursor: pointer;
}
input[type=radio]:checked + label {
background: red;
}
Hide the radio buttons with display: none
Style the labels that follow the radio buttons input[type=radio] + label
Change the styles when a radio button is selected with input[type=radio]:checked + label
Make the cursor a pointer with cursor: pointer on the labels
Full Example
form {
margin: 20px;
}
input[type=radio] {
display: none;
}
input[type=radio]+label {
padding: 10px;
border: solid 1px;
cursor: pointer;
}
input[type=radio]:checked+label {
background: red;
}
<form>
<input id="one" type="radio" name="choices" />
<label for="one">300</label>
<input id="two" type="radio" name="choices" />
<label for="two">500</label>
<input id="three" type="radio" name="choices" />
<label for="three">1000</label>
</form>
I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.
The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo
EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
label {
display: block;
padding: 10px 0;
}
input:checked + div{
text-decoration: line-through;
}
a:focus{
text-decoration: line-through;outline:0;}
<label>
<input type="checkbox" style="display:none"/>
<div>Todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none"/>
<div>Another todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none" id='btnControl'/>
Open Google
</label>
JS
function myFunction() {
document.getElementById("me").style.textDecoration = "line-through";
}
HTML
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open
Google</a>
</label>
I would like to have a form validation with Just HTML5 with Submit button style changes depends on the all the input validation values. ie to display Color of submit button in green if all the input fields are valid /Form is valid .
You can style the submit button based on the form's :valid or :invalid pseudo-class:
form:valid input[type="submit"] {
background-color: #cfc;
color: #060;
}
form:invalid input[type="submit"] {
background-color: #fcc;
color: #600;
}
label {
display: block;
margin: 0.5em 0;
}
<form>
<label>
Serial number:
<input pattern="[A-Za-z]{3}[0-9]{3}" required placeholder="Something like ABC123">
</label>
<label>
<input type="radio" name="radio" value="1" required>
One of these
</label>
<label>
<input type="radio" name="radio" value="2" required>
must be selected
</label>
<input type="submit">
</form>
The only validation that can be done with just HTML is to use the HTML5 'required' attribute which doesn't let a form to be submitted before you do something (click a radio button, fill a text field...).
You can't validate a form to your own likes, and you certainly can't dynamically change elements' CSS properties without JavaScript.
I have a DIV with check boxes and labels defined by CSS style when checked:
#project input:checked + label {background-color:#787878;color:white;}
I want to make two buttons with exceptions to color:white.
Checkbox ID="B" label background-color to turn red and Checkbox ID="C" label background-color to turn blue. I can't figure it out how to add that specificity.
Thanks in advance.
EDIT: (adding HTML code)
<input type="checkbox" id="B" value="B" style="display:none;" onclick="document.getElementById('B').style.color = 'red'"><label for="B"> checkbox B </label>
This is my failed attempt with a line level change. I only posted CSS because I thought this could be done in the style.
You don't need the Javascript. Also add #B, #C { display: none; } if needed.
#B:checked + label {
background: red;
color: white;
}
#C:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="B" />
<label for="B">test</label>
<input type="checkbox" id="C" />
<label for="C">test</label>
Is this what you are looking for input[id="test"]:checked this styles inputs with specific id's and checked state.
And you cant style the background-color in a checkbox as far as i know.
Is it possible to style an active label with just CSS using the following markup:
<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.
For this your can use CSS :checked property for this. Write like this:
#one{
position:relative;
}
#one:checked + span{
display:inline-block;
margin-left:-20px;
padding-left:20px;
background-color: #aa2233;
}
check this http://jsfiddle.net/5TxyJ/5/
Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:
<style type="text/css">
label.active {
background-color: #aa2233;
}
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
See here.