Not working
<div>
<input type="checkbox" id="check" class="check-with-label" />
<label for="check" class="label-for-check">My Label
<img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
</label>
</div>
This works
<div>
<input type="checkbox" id="check" class="check-with-label" />
<label for="check" class="label-for-check">My Label </label>
<img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
</div>
I need the image in the label so that when I select the image, the checkbox is checked. But I can't seem to make the CSS work when I have the image in label.
http://jsfiddle.net/4QV3s/
That's because you're trying to access the image, but you forgot about the label. Also, you don't want to use ~, you want to use + so it will access the following, and only the following label. Replace the + with the ~ again, and you'll see what I mean.
.check-with-label:checked + label > .product-add-image-preview {
border:10px solid yellow;
padding:0; /* To keep things from moving */
}
Here's an updated fiddle. I added a second image so you could see them work independently of each other: http://jsfiddle.net/4QV3s/1/
Related
I'm trying to make the background color of my label changing when I click on my radio button.
However I've tried a lot of solutions that other people have tried, but it seems to doesn't work with my code.
Here the code I have in my CF7 :
<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label id="label1" class="custom-label" for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label id="label2" class="custom-label" for="madame">Madame</label>
</div>
[select genre "Civilité" "Monsieur" "Madame"]
[text* last-name class:champ-text placeholder "Nom*"]
[tel* phone class:champ-text placeholder "Téléphone*"]
[email* email class:champ-text placeholder "Email*"]
[response]
[submit class:envoi-devis class:particuliers "Envoyer ma demande de contact"]
</div>
I have got some CSS to style the form, but the important one is :
input[type=radio]:checked + .custom-label {
background-color: red;
}
I've tried also ~ instead of the + sign but still not working.
Tried also to add a class in JS to the label with an onclick, but same.
If you have any tips, I would be grateful (Sorry if I made some mistakes in my english, it's not my native language)
Not intended as an answer - this is simply to illustrate the css works as expected.
input[type=radio]:checked + label {
background-color: red;
}
<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label for="madame">Madame</label>
</div>
</div>
I have an issue. I am trying to create a single line that contains a radio, a label, and a clickable icon and I want all of these elements to be inline. I want it to be set up like:
Radio Label Icon
in that order. My code HTML looks like this:
<div class="wrapper class>
<div class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</div>
</div>
I have tried to place the icon outside of the label class, but it does not display inline and I have also tried to use display:inline; in my CSS code, to no avail. I am trying to just separate the icon and the label, but I cannot seem to get this to work.
Any and all help would be greatly appreciated!
Thank you in advance!
Change the div class="radio" to an span:
<div class="wrapper">
<span class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</span>
</div>
https://jsfiddle.net/qq3nLwp3/
And improved with some css:
div.wrapper input, div.wrapper i { {
vertical-align: middle;
}
I want to have option buttons to have image and text below image. Right now i have managed to have image but dont know how to arrange text exactly below image without disturbing alignment.
<div>
<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label>
<input type="radio" name="fb" value="big" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
<div>
<label>
<input type="radio" name="fb" value="small1" text="ss" />
<img src="http://placehold.it/20x20/35d/fff&text=f" text="sdsdsd">
</label>
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med1" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
Here is Fiddle .
I am looking for output something like below
Also wish to generate option button in rows and column dynamically. Any idea related on how to achieve it?
Just set the to display: block;
.figures span, .figures img {
display: block;
}
you can write as
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
<span>your text</span>
</label>
Just add this css to the page:
<Style>
label{
float:left;
height:100px;/*can be modified*/
padding:10px;/*can be modified*/
width:50px;
}
</Style>
and after every image add and then the name as below:
<img src="http://placehold.it/20x20/35d/fff&text=f"><br/>
My name
To control how many images per row there is two ways.
1 - adding div for clear:
<div style='clear:both;'></div>
2- add everything inside a div and adjust the width of this div to until your reach to the proper count of images.
add this to the main div that you have
<div id="maincontainer" style="width:100px">
I updated the css by adding width:50px which means every label will be 50px... the main container is 100 => 2 items / row.
make the width of maincontainer to 150 -> 3 item / row....
According to your need, you can get desired output by using <br/> tag or without tag.
With <br /> Tag
fiddle
Without <br /> Tag
fiddle
In fiddle 1 i have used <br / > tag and in second i have used display:block; on images and display:inline-block on label. So use whatever you are ok with :)
You could wrap your images inside a <figure> tag and use <figcaption> for your text below it. I'm not sure what you mean in regards to "option buttons" though.
http://codepen.io/partypete25/pen/KzJOyY
<figure>
<img src="image-src-url" alt="">
<figcaption>Dog</figcaption>
</figure>
Change your CSS with this:
label > input + img {
/* IMAGE STYLES */
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid #ccc;
float: left;
}
Demo
I have a list of checkboxes, each one with a label:
<input type="checkbox" id="patient-birth_city" name="patient-birth_city" />
<label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label>
<input type="checkbox" id="patient-birth_state" name="patient-birth_state" />
<label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label>
<input type="checkbox" id="patient-birth_country" name="patient-birth_country" />
<label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>
Without using any CSS they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?
The good thing about label tags is you can wrap the input elements:
<label>
<input type="checkbox" id="birth_city" name="birth_city" />
City
</label>
<label>
<input type="checkbox" id="birth_state" name="birth_state" />
State
</label>
<label>
<input type="checkbox" id="birth_country" name="birth_country" />
Country
</label>
And if you add the following CSS:
label {
display: block;
}
It will display it how you want.
Demo here
As you CAN'T edit your HTML, this CSS would work:
input, label {
float: left;
}
input {
clear: both;
}
Demo here
Using float:left and clear:left you can do this with only css.
Demo: http://jsfiddle.net/VW529/2/
input {margin:3px;}
input, label {float:left;}
input {clear:left;}
The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)
I have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.
This is the code :
<div>
<input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/>
<input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/>
....
and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried style="vertical-align:middle" and it does not work.
Any ideas?
When applied to inline elements, vertical-align specifies where to align a certain part of the child element to a corresponding part of the parent's line box. For example, "middle" roughly aligns the middle parts of each. If you want to align two siblings, you'll need to apply the same vertical alignment to both, otherwise the element will align to the parent's baseline.
<style type="text/css">
input[type="radio"], input[type="radio"]+label img {
vertical-align: middle;
}
</style>
<ul>
<li>
<input type="radio" name="pic" id="pic1" value="1" />
<label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label>
</li>
<li>
<input type="radio" name="pic" id="pic2" value="2" />
<label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label>
</li>
</ul>
<div style="width=define_your_image_container_width_here">
<div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div>
<div style="float:right;"><img src="pic01.jpg"/></div>
</div>
In addition to the previous answer, the radio button must have the same actual height as the image for it to work. By actual I mean it must match height, padding, margin and border.