How can I get an input type="radio" the same style in all browsers. I am trying to get 3 radio buttons from left to right accross the page with the radio button and text centered in all IE9, Chrome, and FF using css. I am using all diffferent types or vertical align and padding which works on some but browsers but not all.
<input class="text-bottom" type="radio" value="1" name="ProcessingComplete">Works in FF & Chrome
<input class="middle" type="radio" value="1" name="ProcessingComplete">Works in IE
<input class="top" type="radio" value="1" name="ProcessingComplete">Works in FF & Chrome
.middle
{
vertical-align: middle;
}
.top
{
vertical-align: top;
}
.text-bottom
{
vertical-align:text-bottom;
}
As pointed out by Dario on Radio/checkbox alignment in HTML/CSS, try this:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
Also, keep in mind it is best practice to wrap your radio button labels using the <label> tag.
See DEMO.
Related
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I have the following html.
<td>
<div id="form_comparison" class="field radio_field">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
<label for="form_comparison_0">Increased</label>
<input type="radio" id="form_comparison_1" name="form[comparison]" value="2" />
<label for="form_comparison_1">About the same</label>
<input type="radio" id="form_comparison_2" name="form[comparison]" value="3" />
<label for="form_comparison_2">Decreased</label>
</div>
</td>
Using css, how can I position radio buttons vertically, so that labels are displayed just after their respective radio buttons in the same line?
I don't know why you've wrapped this inside a td element, if you are designing a form layout, than ignore tables and use div for designing your form. Coming to your question, you can wrap the labels around input tag and use display: block; for label
#form_comparison label {
display: block;
}
Wrap each input using label like this
<label for="form_comparison_0">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
Increased
</label>
Demo
If you don't have any permissions to change the markup, you can use CSS content property with white-space: pre; and that will give you the desired output
label:after {
content: "\A";
white-space: pre;
margin-bottom: 10px;
}
Demo (No Changes In The Markup)
Note: Use #form_comparison label instead of only label as it will
select and apply all label element in your website where
#form_comparison label will only select label elements inside
#form_comparison
Working FIDDLE Demo
Float your input and label, and for second row, clear the float to make a new row:
#form_comparison input {
float: left;
}
#form_comparison label {
float: left;
}
#form_comparison label + input {
clear: both;
}
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!
I have this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.
How to vertically Align a text with a Select Option.
Link: http://mink7.com/projects/test/dashboard.html
Use labels as in this example fiddle. Markup:
<form action="">
<label for="startDate">Start Date:</label>
<select id="startDate">
<option value="Mar 04">Mar 04</option>
</select>
<label for="endDate">End Date:</label>
<select id="endDate">
<option value="Aug 04">Aug 04</option>
</select>
</form>
When this does not work, then there are some inherited styles interfering and try to set vertical-align: middle as shown in this demo.
In IE and Chrome the select tag text is aligned center automatically, not in firefox. To only target firefox with a padding, without compromising IE and Chrome:
Use a browser specific hack for FF and give it a padding-top:
#-moz-document url-prefix() {
.select select{
padding-top: 8px;
}
}