I am new to css, and I am experimenting with css attribute selectors. I am trying to implement it to a radio button, but it seems not to do it's job
I tried moving the style tag inside or outside the head tag, but that doesn't seem to be the problem at all.
<!DOCTYPE HTML>
<html>
<style>
[type="radio"]{
margin: 800 px;
color:palevioletred;
size: 200px;
}
</style>
<head>
</head>
<body>
<input type="radio" name="gender" value="male">Male</input>
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
It has to change the color,size and margin (they are just test cases). I am not getting why there are no changes?
Let me clear you something out. Until here it is ok:
<input type="radio" name="gender" value="male"/>
to continue on just do that:
<input type="radio" name="gender" value="male"/><label>Male</label>
.
.
.
easy as that.
I'll put anything that was going wrong in code comments.
<!DOCTYPE HTML>
<html>
<!-- you cannot put the style tag (or anyhting else except the doctype)
anywhere except in the head or body of the document -->
<style>
[type="radio"] {
margin: 800 px; /* has to be 800px, not 800 px */
color: palevioletred;
size: 200px; /* this would have to be font-size or width depending on what you are trying to accomplish, not size */
}
</style>
<head>
</head>
<body>
<!-- input elements cannot have text or HTML content -->
<input type="radio" name="gender" value="male">Male</input><!-- and thus, no closing tag either -->
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
Related
I am using some code from purecss.io to create some elegant looking forms. I am also using this code to have a simple rating system for my form.
However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from purecss.io
How can I fix the spacing?
Here is the code:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<form action="" method="post" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
<input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
--><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
--><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
--><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
--><input type="radio" name="group-1" id="group-1-4" value="1" /><label for="group-1-4"></label>
</div>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<input name="SubmitButton" type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Here is what the page looks like for me:
I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a codepen.io and made a few quick changes to see if this is what you were looking for.
I added the class "raters" to your markup and styled it with that.
<div class="pure-control-group raters">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
You can see why I've added these style rules in the comments supplied with them:
.raters label{
float:left; /* Corrective float for your modified code */
}
.raters input{
margin:0 0.25em; /* Spaces out the 'floated' radio inputs for presentation*/
}
.raters .acidjs-rating-stars label{ width:auto; } /* Actual Width Correction */
You can see it working live here: http://codepen.io/anon/pen/vKNGpv
(Note: I added the yahoo's external stylesheet to the CSS panel settings. You can access them with the gear in the top right-hand corner.)*
You can override margin for the inputs (which are you rating stars) of the purecss css in another css file with this very specific selector:
.pure-form.pure-form-aligned .acidjs-rating-stars input[name="group-1"] {
background: blue;
margin-right: -160px;
}
The base css is overwriting yours as you have suspected. You need to either define your padding/margin on your label elements using !important to make sure the css rules you define take precedence.
For instance if the margin for label elements is 0.5em top/bottom 0.2em on the left/right and you only want it say 0.1em on the left/right you would have to define in your css file like this
margin: {
0.5em 0.1em !important;
}
I want to built a simple quiz in CSS without using javascript, I have written this code but please tell how can I apply action listener on radio button without using javascript? like if correct option is selected then a message "Correct" should be printed.
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
</head>
<body>
<h3>Capital of USA is?</h3>
<input type="radio" value="opt1" name="capital">New York<br>
<input type="radio" value="opt2" name="capital">Washington<br>
</body>
</html>
You can use a bit of hack for this
Note:this might not be a good solution,this is the best that css can do
label {
display: none;
}
input:checked +br+ label {
display: block;
}
<h3>Capital of USA is?</h3>
<input type="radio" value="opt1" name="capital">New York
<br>
<label>Wrong answer</label>
<input type="radio" value="opt2" name="capital">Washington
<br>
<label>Right answer</label>
I have this kind of html
<label>
<input type="checkbox">
Print document
</label>
The problem is that Print document text is alwats sticed to check box?
I can not add Print Document in new element, of controller, is it possible to do that
is simple CSS rule?
Add CSS :
input[type=checkbox]{
padding-right : 10px;
}
the correct html is : <input type="checkbox"><label>Print document</label>
After you can select in css the checkbox like this :
input[type=checkbox]{
margin-right: 15px;
}
You can do this:
FIDDLE
HTML:
<input type="checkbox">
<label>
Print document
</label>
CSS:
label{
margin-left:20px;
}
You can use margin in style:
Inline CSS:
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Internal CSS:
<head>
<style>
input[type=checkbox]{
margin-right: 15px;
}
</style>
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
External CSS:
style.css
input[type=checkbox]{
margin-right: 15px;
}
page.html
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Demo:
Inline CSS
Internal CSS
External CSS
I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.
Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}
Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/
Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?
<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="color" value="" id="SubmitQuestion" />
<input type="radio" name="color" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="color" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="color" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Also let me state that I use the yui css styles as base. If you are not familir with them, they can be found here:
reset-fonts-grids.css
base-min.css
Documentation for them both here : Yahoo! UI Library
#pkaeding: Thanks. I tried some floating both thing that just looked messed up. The styling active radio button seemed to be doable with some input[type=radio]:active nomination on a google search, but I didnt get it to work properly. So the question I guess is more: Is this possible on all of todays modern browsers, and if not, what is the minimal JS needed?
The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.
Getting the Label Near the Radio Button
I'm not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into float: territory):
Use <br />s to split the options apart and some CSS to vertically align them:
<style type='text/css'>
.input input
{
width: 20px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Follow A List Apart's article: Prettier Accessible Forms
Applying a Style to the Currently Selected Label + Radio Button
Styling the <label> is why you'll need to resort to Javascript. A library like jQuery
is perfect for this:
<style type='text/css'>
.input label.focused
{
background-color: #EEEEEE;
font-style: italic;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.input :radio').focus(updateSelectedStyle);
$('.input :radio').blur(updateSelectedStyle);
$('.input :radio').change(updateSelectedStyle);
})
function updateSelectedStyle() {
$('.input :radio').removeClass('focused').next().removeClass('focused');
$('.input :radio:checked').addClass('focused').next().addClass('focused');
}
</script>
The focus and blur hooks are needed to make this work in IE.
For any CSS3-enabled browser you can use an adjacent sibling selector for styling your labels
input:checked + label {
color: white;
}
MDN's browser compatibility table says essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.
This will get your buttons and labels next to each other, at least. I believe the second part can't be done in css alone, and will need javascript. I found a page that might help you with that part as well, but I don't have time right now to try it out: http://www.webmasterworld.com/forum83/6942.htm
<style type="text/css">
.input input {
float: left;
}
.input label {
margin: 5px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>