I want to have 8 radio buttons in one image. To be more specific i want to have an image of hawaai islands. Different radio button every island so i can choose one. Thank you very much
You should use absolute position then.
div {
height:400px;
width: 400px;
background: #124578;
position: relative;
}
#radio01 {
position:absolute;
left:0;
top:50%;
}
#radio02 {
position:absolute;
left:calc(100% - 25px);
top:25%;
}
#radio03 {
position:absolute;
left:50%;
top:70%;
}
<div>
<form action="">
<input type="radio" id="radio01" name="radio" />
<input type="radio" id="radio02" name="radio" />
<input type="radio" id="radio03" name="radio" />
</form>
</div>
Related
I have a picture of Hawaiian islands and I've placed 8 radio buttons with absolute position. But when I use the Chrome inspector to see if the image with the radio buttons are responsive, I see that they are not and the buttons don't stay on the spot on the image that were on full screen. Any suggestions?
CSS:
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}
#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}
#radio3{
position:absolute;
top:63.2%;
left:34.05%;
}
#radio4{
position:absolute;
top:66.8%;
left:38%;
}
#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}
#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}
#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}
#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}
#third.form img{
display:block;
max-width: 100%;
height: auto;
HTML:
<img src="map.png">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
Okay so the the dots position changes because the left and top positions are with respect to the entire container and not the containing div itself.
From the snippet you are positioning the radio buttons absolute to the body element.
Since image tag is inline and cannot hold html child elements, simply place the radio buttons in a div (parent) and add a background image to your div. Then you will notice how the radio button are positioned absolute to the parent (div container)
#container{
position:relative;
background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRiWmnVBwnR9ddbHOGmGaoA3gTrU5r3pslI-IybKWIJz4Amy6VA);
background-size:cover;
width:200px;
height:200px;
}
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}
#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}
#radio3{
position:absolute;
top:63.2%;
left:34.05%;
}
#radio4{
position:absolute;
top:66.8%;
left:38%;
}
#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}
#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}
#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}
#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}
#third.form img{
display:block;
max-width: 100%;
height: auto;
<div id="container">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>
First you need to use a container to wrap the radio button children, and you can set the island image as the background.
Then make use of the media queries to set the image size to achieve a responsive design.
.container {
position: relative;
background-image: url(http://hawaiian-words.com/hw/wp-content/uploads/2014/09/hawaii-island-road-map.jpg);
background-size: cover;
width: 884px;
height: 927px;
}
#radio1 {
position: absolute;
top: 58.9%;
left: 24.4%;
}
#radio2 {
position: absolute;
top: 57.5%;
left: 27.1%;
}
#radio3 {
position: absolute;
top: 63.2%;
left: 34.05%;
}
#radio4 {
position: absolute;
top: 66.8%;
left: 38%;
}
#radio5 {
position: absolute;
top: 68.9%;
left: 40.4%;
}
#radio6 {
position: absolute;
top: 69.7%;
left: 38.8%;
}
#radio7 {
position: absolute;
top: 73.1%;
left: 40.5%;
}
#radio8 {
position: absolute;
top: 78.8%;
left: 45.5%;
}
#third.form img {
display: block;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 768px) {
.container {
width: 884px;
height: 927px;
}
}
#media (max-width: 768px) and (min-width: 480px) {
.container {
width: 663px;
height: 695px;
}
}
#media (max-width: 480px) {
.container {
width: 442px;
height: 463px;
}
}
<div class="container">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>
I've seen some tricks to change the background color (or other css attributes) on a group of radio buttons. Here is some html
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="one" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="two" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="three" data-bind="checked: SelectedAttributeValueId" />
</div>
I've tried things like:
.myclass input[type="radio"]:checked{
background-color:#f2f2f2;
}
and
.myclass :checked{
background-color:#f2f2f2;
}
here is a fiddle link. I am using knockout, so maybe this is the tool I should use to style the <div> elements?
All input is appreciated, I would prefer not to use jquery or javscript here (although knockout is okay)
It is not possible to style the radio buttons circle.
However, you can use pseudo-elements (in this case :before) to render a box around the radio button, then style it in CSS.
input[type="radio"] {
display: inline-block;
position: relative;
width: 25%;
margin: 0;
}
input[type="radio"]:before {
content: '';
position: absolute;
z-index: -1;
top: -.5em;
right: 0;
bottom: -.5em;
left: 0;
border: 1px solid black;
background-color: #0073ae;
}
input[type="radio"]:checked:before {
background-color: #f2f2f2;
}
<input type="radio" name="mygroup" value="one" /><input
type="radio" name="mygroup" value="two" /><input
type="radio" name="mygroup" value="three"/>
Here's a solution via jquery.
$('[type=radio]').click(function(){
if($(this).val() == "one") {
$('.myclass').css("background-color", "yellow");
}
//...two...three
});
I have made a check box which is used to select various items available to choose from
When any of the check boxes is clicked, the first one get checked leaving the clicked one unchecked.
CSS
.checkbox {
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
padding:0;
border:0;
position:absolute;
}
.checkbox + label.label {
padding-left:20px;
height:15px;
display:inline-block;
margin-top:3px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:11px;
vertical-align:middle;
cursor:pointer;
float:right;
}
.checkbox:checked + label.label {
background-position: 0 -15px;
}
.label{
background-image:url(images/dark-check-green.png);
color:white;
font-size:11px;
font-weight:100;
}
HTML
<input id="tick" class="checkbox" type="checkbox" />
<label for="tick" name="tick_box" class="label"></label>
Using the same for="" attribute for all the labels will result in unwanted and weird behaviour. You should make sure its different for each label + checkbox.
Example:
<input id="tick1" class="checkbox" type="checkbox" />
<label for="tick1" name="tick_box" class="label"></label>
<input id="tick2" class="checkbox" type="checkbox" />
<label for="tick2" name="tick_box" class="label"></label>
<input id="tick3" class="checkbox" type="checkbox" />
<label for="tick3" name="tick_box" class="label"></label>
Hello I want to have for every radio-button other image not for all button's same image.
How would I do that? I tried it on many ways but none has worked yet..
My code with only 1 img for all radio-button is:
<head>
<style>
input[type=radio]:before {
display: block;
width: 50px;
height: 50px;
content: '';
position: absolute;
background-image: url(img.png);
background-size: 50px 50px;
pointer-events: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
input[type=radio]:checked:before {
background-image: url(img.png);
border:2px solid #3e6cd4;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.radiostyle {
display:inline-block;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">
</body>
Thanks for help!
You can use additional CSS selectory, otherwise add seperate classes or id's:
input[type="radio"][value="1"]:before {
background-image: url(img1.png);
}
input[type="radio"][value="1"]:checked:before {
background-image: url(img1.png);
}
input[type="radio"][value="2"]:before {
background-image: url(img2.png);
}
input[type="radio"][value="2"]:checked:before {
background-image: url(img2.png);
}
input[type="radio"][value="3"]:before {
background-image: url(img3.png);
}
input[type="radio"][value="3"]:checked:before {
background-image: url(img3.png);
}
I think you should add a class name for every option item, after your initial declarations, for example:
input[type=radio].button1:before {
background-image: url(img2.png);
}
input[type=radio].button1:checked:before {
background-image: url(img3.png);
}
[...]
And in your code you should use:
<input type="radio" name="radio1" class="radiostyle button1" value="1">
<input type="radio" name="radio1" class="radiostyle button2" value="2">
<input type="radio" name="radio1" class="radiostyle button3" value="3">
Just add another class having different property for image. JsFiddle Link Demo
For example :
.first_image:checked:before { border:2px solid blue; }
.second_image:checked:before { border:2px solid green; }
.third_image:checked:before { border:2px solid red; }
<input type="radio" name="radio1" class="radiostyle first_image " value="1">
<input type="radio" name="radio1" class="radiostyle second_image " value="2">
<input type="radio" name="radio1" class="radiostyle third_image" value="3">
I am trying to use images in place of radio buttons. When I don't use images I can select the 'male/female' value correctly. However, when I stylize the css to use images the value always defaults to male. The image used is a sample. Can you please help point out my error in the code below. Also, can anyone provide any pointers on how to use different images for the different radio buttons.
HTML:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>
CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content:'';
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
border-style: solid;
border-width: 10px;
}
You don't need to use :before for this when you can just place the img tag within your label like so:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
<img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
<img src="..." />
</label>
And then remove the :before from your CSS
Fiddle: http://jsfiddle.net/L94mK/
As far as i can see, it's returning the proper value... check this JSFiddle
as for giving different images for the radio buttons, you can use nth-child css selector as follows:
input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}
Check this JSFiddle