I found a code to help change stars color as you hover over them. It works like a charm. However, when I click on a star to fix the rating, it sends me to the top of the page. The stars are a little at the bottom of the page so it is very annoying to click on a star and end up at the top and having to scroll back down again.
The page is not being refreshed. It just sends me to the top. Is there a way to prevent this and allow the user to click on the star and stay on the part of the page where the stars are?
HTML
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
Here is the full code:
jsfiddle
Thanks
DEMO
Hi User2961763
It seems that top:-9999px; on .rating:not(:checked) > input causing problem. if you comment or remove this style it will work fine though you also need to take care that it wont affect your other functionality. Hope it Helps
.rating:not(:checked) > input {
position:absolute;
/* top:-9999px; */
clip:rect(0,0,0,0);
}
Related
I am working on an android App using jQuery mobile,phonegap in which i have form i need to make the radio elements to be as native ones not as button like this
[1]: http://i.stack.imgur.com/YKEGa.png
, i do that by adding data-role="none" , but the radio size " selected circle " is too small how can i enlarge the radio size ?
please help me,
Thanks in advance.
You can basically style the fields as you wish. For example, the below theme has the style as you expect.
http://driftyco.github.io/graphite/
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
I have the following Radio buttons in jQuery Mobile as in the picture, and I need to increase the radio size since it is too small, I have adjusted the width and height attributes but it did not work.
How can I do that since I don't want them appear as buttons, I need them in this look?
Here is the code:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-choice" id="List" value="List" checked="checked" data-role="none" />
<label for="List">List</label>
<input type="radio" name="radio-choice" id="Grid" value="Grid" data-role="none" />
<label for="Grid">Grid</label>
<input type="radio" name="radio-choice" id="Gallery" value="Gallery" data-role="none"/>
<label for="Gallery">Gallery</label>
</fieldset>
I have written the following code:
male <input type="radio" name="sex" value="male">
female <input type="radio" name="sex" value="female">
other <input type="radio" name="sex" value="other">
All this is inside a form. How can I get them on one single line?
Wrap them in a label tag
<label>male <input type="radio" name="sex" value="male"></label>
<label>female <input type="radio" name="sex" value="female"></label>
<label>other <input type="radio" name="sex" value="other"></label>
also check if no styles are applied to the input elements which may display them as block elements
If you want the dots to go in a line from left to right, you are done. If you want to dots to go from top to bottom you can simple do:
male <input type="radio" name="sex" value="male"><br>
female <input type="radio" name="sex" value="female"><br>
other <input type="radio" name="sex" value="other">
<br> makes them jump to the next line
I am writing an HTML5 page at the moment, I'm having an issue switching format from using br for line spacing to line-height, padding, or margin (whichever is easier). Everything is inside of a form and fieldset tag I do not want every line to be on their own, just some. Some text I do want next to each other because I am making a form that has radio buttons and check boxes. But instead of using br tags how I can switch that out to line-height, padding, or margin in css.
<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>
....
Try to use a fieldset for each group of radios so you can control them more precisely, put margin only around your group and etc.
You can use labels and span around the label/input groups, so you can control them better.
<span>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</span>
Also if you use a class specific for your input, you can make it display in block, like this:
input.block {
display: block;
}
then if you put this class block on your input the label will stay in another line...
For a bigger picture see this fiddle:
http://jsfiddle.net/BxwNL/1/
Update: another solution according to cinnamon comment
You can also use a list for your items, but it would make sense if you grouped them according to their properties, like a list for the colours, a list for the types...
The usage would be like:
<ul>
<li>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</li>
<li>
<label for="name2">Value2</label>
<input type="checkbox" name="name2" value="2"/>
</li>
</ul>
Fiddle example for the list solution:
http://jsfiddle.net/BxwNL/2/
Say I have the following mark up:
<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>
The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?
You don't need CSS. Wrap your input in a label and put the text last.
<label><input type="radio" name="name" id="name"/>Name:</label>
Is that still semantic for you?
Or you could try the float.
Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.
To answer your question: just do it in the order you want to display it
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
fiddle http://jsfiddle.net/Jm2JR/1/..
write like this:
input{
float:left;
}
Check this http://jsfiddle.net/3cLRg/
<label for="name" style="float:right;">Name:</label>
try this:
<label style="position:relative; left:100px;" for="name">Name:</label>
<input type="radio" name="name" id="name"/>
2nd approach is :
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
Hi you just define your input tag as like that
<label>Name:
<input type="radio" name="name" id="name"/></label>
<br />
<label>
<input type="radio" name="name" id="name"/> Name
</label>
Live demo http://jsfiddle.net/rohitazad/bhBQn/1/