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">
Related
I have a form with several input radio type:
<form class="search" action="{{ url_for('np.bkg') }}" method="post">
<input type="text" name="query" style="max-width:700px" placeholder="Search over bkg..." id="query" value="{{query}}" autocomplete="on" required>
<button type="submit"><i class="fa fa-search"></i></button>
<div>
<input type="radio" name="searchType" id="kmatch" value="kmatch" checked="checked"> match </input>
<input type="radio" name="searchType" id="kextraction" value="kextraction"> extract </input>
</div>
</form>
In my css I have this:
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 100%;
background: #f1f1f1;
border-radius: 15px;
}
Now, my question, how to create a different css style for the 2nd input radio type? The current 'input' css element will apply to both radio boxes.
EDIT: I think my css only applies to the first input type='text' tag. So the question is the same, how to make different css styles for 2 different input radio tags?
Try this (for more attractive and user-friendly layout):
<style>
.radio-label{
border: 1px solid #abc;
border-radius: 4px;
padding: 7px 7px 5px 3px;
cursor: pointer;
box-shadow: 0 0 10px #abc;
}
.radio-label.radio-1{
background-color: #ddf;
}
.radio-label.radio-2{
background-color: #eed;
}
</style>
<label class="radio-label radio-1" for="radio-1"><input type="radio" name="radio-btn" id="radio-1" >Radio 1</label>
<label class="radio-label radio-2" for="radio-2"><input type="radio" name="radio-btn" id="radio-2" >Radio 2</label>
EDIT: You can also play with radio inputs with:
.radio-label input{
width: 20px;
height: 20px;
position: relative;
top: 4px;
}
for different styles, you can either give the two elements two different classes and define style for those classes :
.radio-input1{
width:20px;
height:20px;
}
.radio-input2{
width:10px;
height:10px;
}
or you can give the two inputs, two different ids and repeat the above code:
#radio1{
width:20px;
height:20px;
}
#radio2{
width:10px;
height:10px;
}
for classes:
<input class="radio-input1">
for id :
<input id="radio1">
I am completely new to programming and I am trying to make a simple survey page to start. I am only using CSS and HTML. I have made radio buttons but I am not sure how to 'select' them in CSS.
Below is my HTML code. I would like to style the questions that are in element <p> but I want to do them all differently. I know I can select p {'how I want font, etc.. styled here} and then style in CSS but I want them all slightly different colors. When I try .survey-question-1 p {'how I want font styled here'} nothing happens.
I really don't know what selectors to use to call the elements I want to change.
<div class='survey-name'>
First name: <input type='text' id= 'firstname' name='FirstName'><br>
Last name: <input type='text' name='LastName'><br>
</div>
<div class='survey-question-1'>
<p>Are you a Front-End or Back-End Developer?</p>
<input type='radio' name='developer' value='Front-End'> Front-End<br>
<input type='radio' name='developer' value='Back-End'> Back-End<br>
</div>
<div class='survey-question-2'>
<p>How many years of experience do you have?</p>
<input type='radio' name='years' value='less than 1'> less than 1<br>
<input type='radio' name='years' value='1-2'> 1-2<br>
<input type='radio' name='years' value='2-3'> 2-3<br>
<input type='radio' name='years' value='3-4'> 3-4<br>
<input type='radio' name='years' value='4-5'> 4-5<br>
<input type='radio' name='years' vale='more than 5'> more than 5<br>
</div>
A good practice is to label your radio buttons. (See MDN page for labels). So I assume you will change your markup accordingly.
Secondly you probably want to use the attribute selector to target the radio buttons. You can also use the :checked pseudo selector for styling the checked radio button.
And thirdly, to style radio buttons you might need to apply appearance: none.
.survey-question-1 input[type="radio"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: pink;
border: 0.5ex solid pink;
border-radius: 100%;
width: 1em;
height: 1em;
}
.survey-question-1 input[type="radio"]:checked {
background: rebeccapurple;
}
<form>
<fieldset class='survey-question-1'>
<legend>
Are you a Front-End or Back-End Developer?
</legend>
<label>
<input type='radio' name='developer' value='Front-End'>
Front-End
</label>
<label>
<input type='radio' name='developer' value='Back-End'>
Back-End
</label>
</fieldset>
</form>
Bear in mind, this is a hideous design, but it will show you how to change the color/styling of every single component on your page.
Let me know if there is specific styling you were after or if something is unclear.
/* Style Survey Name section */
.survey-name {
color: green;
}
.survey-name input {
border: 1px solid green;
}
/* Style Survey Q1 section */
.survey-question-1,
.survey-question-1 p {
color: red;
}
.survey-question-1 input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: white;
content: '';
display: inline-block;
border: 2px solid gray;
}
.survey-question-1 input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: red;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid gray;
}
/* Style Survey Q2 section */
.survey-question-2,
.survey-question-2 p {
color: blue;
}
.survey-question-2 input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: white;
content: '';
display: inline-block;
border: 2px solid gray;
}
.survey-question-2 input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: blue;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid gray;
}
<div class='survey-name'>
First name: <input type='text' id='firstname' name='FirstName' /><br />
Last name: <input type='text' name='LastName' /><br />
</div>
<div class='survey-question-1'>
<p>Are you a Front-End or Back-End Developer?</p>
<input type='radio' name='developer' value='Front-End' /> Front-End<br>
<input type='radio' name='developer' value='Back-End' /> Back-End<br>
</div>
<div class='survey-question-2'>
<p>How many years of experience do you have?</p>
<input type='radio' name='years' value='less than 1' /> less than 1<br>
<input type='radio' name='years' value='1-2' /> 1-2<br>
<input type='radio' name='years' value='2-3' /> 2-3<br>
<input type='radio' name='years' value='3-4' /> 3-4<br>
<input type='radio' name='years' value='4-5' /> 4-5<br>
<input type='radio' name='years' vale='more than 5'> more than 5<br>
</div>
See also JSFiddle
Resources I used:
Radio Button Styling
:After CSS
input {
position: absolute;
left: -9999px;
}
input + label {
border-right: solid 1px #000;
padding-right: 8px;
margin-right: 8px;
}
input:checked + label {
display: none;
}
<input type="radio" id="one" name="option" checked/>
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>
There are three options, when the option is selected, it should be hidden, including the border line between the option and the next option.
For example,
When I select "One", I should see "Two | Three".
When I select "Two", I should see "One | Three".
When I select "Three", I should see "One | Two".
It does not necessary to be radio buttons, any other possible solutions are also welcome, but I want to achieve this by using CSS only.
Try the CSS selector :last-of-type. It's just, using CSS, you ~might~ have to give up that last border line in general.
code updated below
input {
position: absolute;
left: -9999px;
}
/*input:first-of-type + label {
border-right: solid 1px #000;
padding-right: 4px;
margin-right: 4px;
}*/
input:not(:first-of-type) + label {
border-left: solid 1px #000;
padding-left: 8px;
margin-left: 8px;
}
input:checked + label {
display: none;
}
/*label:not(:checked):last-of-type {
border-right: none;
}*/
<html>
<input type="radio" id="one" name="option" />
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>
<input type="radio" id="four" name="option" checked/>
<label for="four">Four</label>
<input type="radio" id="five" name="option" />
<label for="five">Five</label>
</html>
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 am trying to do a css hover effect.
I want the previous stars to also change their background image as the stars are hovered.
I have tried some different things but can't seem to understand the CSS that has to be used. Can anybody guide me?
I have the rating project here
HTML
<form action="" method="post" class="absolute babesRate flex">
<label>
<input type="radio" name="vote" value="1" id="vote1">
</label>
<label>
<input type="radio" name="vote" value="2" id="vote2">
</label>
<label>
<input type="radio" name="vote" value="3" id="vote3">
</label>
<label>
<input type="radio" name="vote" value="4" id="vote4">
</label>
<label>
<input type="radio" name="vote" value="5" id="vote5">
</label>
</form>
CSS
label{
background-image: url(../img/voteEmpty.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
label+input[type="radio"]:checked{
background-image: url(../img/voteFull.png);
}
label:hover{
background-image: url(../img/voteFull.png);
}
You need to do like this, where you put the input outside the label, or else they will not "see" the label(s), and then, with the flexbox order property, you swap them in markup so you can make use of the sibling selector ~.
.flex {
display: flex;
}
label {
display: inline-block;
background: gray url(../img/voteEmpty.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
margin: 2px;
}
input[type=radio] {
display: none
}
label:nth-of-type(1) { order: 5; }
label:nth-of-type(2) { order: 4; }
label:nth-of-type(3) { order: 3; }
label:nth-of-type(4) { order: 2; }
label:nth-of-type(5) { order: 1; }
input:checked ~ label {
background: red url(../img/voteFull.png);
}
form:hover label {
background: gray url(../img/voteEmpty.png);
}
form label:hover,
label:hover ~ label {
background: red url(../img/voteFull.png);
}
<form action="" method="post" class="absolute babesRate flex">
<input type="radio" name="vote" value="5" id="vote5">
<label for="vote5">5</label>
<input type="radio" name="vote" value="4" id="vote4">
<label for="vote4">4</label>
<input type="radio" name="vote" value="3" id="vote3">
<label for="vote3">3</label>
<input type="radio" name="vote" value="2" id="vote2">
<label for="vote2">2</label>
<input type="radio" name="vote" value="1" id="vote1">
<label for="vote1">1</label>
</form>
At the end of your styles, you have this:
.parent label:hover,
.parent label:hover ~ label {
background-image: url(../img/voteFull.png);
}
Change that to this one:
label:hover,
label:hover ~ label {
background-image: url(../img/voteFull.png);
}