I have some Radio Buttons as shown here:
<input type="radio" name="sex" id="Duration" value="Duration"/>
<label"Duration">Date Range</label>
I have tried several ways, but i am unable to change the styling for the label of these radio Buttons
Could anybody please help me?
First you need to correct the label code, you have <label"Duration"> and it should have "for", like this:
<label for="Duration">
(read here: http://www.w3schools.com/tags/tag_label.asp)
Then you need to target the <label> with your CSS.
Try this in your CSS definitions:
label {
text-size: 11px;
font-weight: bold;
}
To contribute a little to jackJoe
a little something on the side:
"i would recommend using class over 'id' because class is used for muliply uses for the same purpose, like a bunch of radiobuttons that need the same style, id however is for most of the time one time only styles.";
<label class="duration">
in css you need the '.' to call it a class and a '#' to call it an id (sorry for my bad english)
css:
.duration{
width:21px;
height:21px;
margin: 0px;
padding: 0px;
background-image:url(images/radiobutton.png);
background-repeat: no-repeat;
}
on the side watch out for using Capslock letters in the beginning its better to use only small letters.
This is a sample styling
.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
Related
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
Sorry gals & guys for a potentially dumb question but I have been looking for various ways to solve this issue and it still does not work like I want it to.
This is one of these issues where an input field stays very short (like ~150px) even though the box it is is much wider (like ~1300 px on a wide monitor).
I originally had the html & CSS shown in:
http://jsfiddle.net/jjoensuu/qSz5x/5/
In an attempt to solve this issue I found the solutions in:
How to make text input box to occupy all the remaining width within parent block?
I created what I think is similar to "wdm"'s answer in above thread, but I am missing something because the result is still a narrow input field. My creation is here:
http://jsfiddle.net/jjoensuu/rJ45P/8/
I also tried the solution from "Marty Wallace" in same thread but could not get it to work.
So as a reference to my code on the jsfiddle site, the "topsearch" box gets the width of ~1300 pixels but the "field-topsearch" input field stays at around 156px.
With some of my attempted solutions the "Go" button wraps to the next line below. Any help on how to solve this would be appreciated.
I took a slightly different approach. It appears to me you wanted the input text field to expand but the label and input button to remain the same size either side of the input field. This may well be useful for generating a form containing multiple rows without resorting to table layouts. Also the previous suggestion does not really work very well regarding keeping the elements on one line. This technique would allow the containing 'box' to be resized to whatever you liked at will.
I did have to tweak your html a little, but I feel the label should be next to the element it is related to anyway. I have also left out the form html for clarity since that is not part of the layout:
<div class="input">
<label for="field-topsearch">Search</label>
<div class="value">
<div>
<input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
</div>
<input type="submit" class="button-start-search submit " value="Go!"/>
</div>
</div>
And the css:
.value {
position: relative;
}
.value>div {
margin-left: 60px;
margin-right: 40px;
}
label {
position: absolute;
top: 0px;
left: 0px;
}
input.submit {
position: absolute;
top: 0px;
right: 0px;
}
input[type="text"] {
width: 100%;
}
The fiddle is available here
Here is the working fiddel: http://jsfiddle.net/surendraVsingh/rJ45P/18/
CSS
.topsearch
{
height: 40px;
line-height: 35px;
padding-right: 10px;
width:100%;
display:table;
}
.topsearch label
{
color: #c98116;
text-transform: uppercase;
font-weight: normal;
font-size: 0.9em;
margin: 0 5px;
}
.topsearch label, .topsearch form
{
display: inline;
}
.topsearchfield
{
border: none;
height: 24px;
font-size: 15px;
width: auto;
}
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
{
display: table-cell;
}
When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.
My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?
For example... I have the following HTML for my button
<input type="image" id="login_submit" name="login_submit" src="button_login.png" />
and seperate to this I have the following CSS that I used before...
#login_submit a {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
background-position: -141px 0;
}
#login_submit a:active {
background-position: -282px 0;
}
now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.
or should I stick with having 2/3 separate buttons for each state?
Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:
#login_submit {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
background-position: -141px 0;
}
#login_submit:focus {
background-position: -282px 0;
}
Good luck,
Leo
I had this problem too, but just solved it.
By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.
=)
Code is taken directly from my situation:
HTML:
<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>
CSS:
#send
{
height: 25px;
width: 107px;
overflow: hidden;
display: block;
float: right ;
background: url('../images/style/button-send.png');
}
#send:hover
{
background-position: 0 -25px;
}
I hope this helps. =)
By the way, for me this approach took care of the problems mentioned by svict4 as well. =)
What is a good way to give the input field below the three characteristics listed?
Characteristics:
-Always 30 px from the left side of the browser window.
-Always 30 px below the words "Add a comment" if no comments have been added.
-Always 30 px below the preceding comment if one or more comment(s) has (have) been added.
Thanks in advance,
John
HTML / PHP Code:
<div class="addacomment"><label for="title">Add a comment:</label></div>
<div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div>
CSS (thusfar I have no declarations for the "commentbox" selector):
.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }
.addacomment
{
position:absolute;
width:250px;
left:30px;
top:180px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
First off, you don't need those <div>s. You can just add class="addacomment" to the label.
So you've got this:
<label class="addacomment" for="title">Add a comment:</label>
<?php print $your_comments_if_any; ?>
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">
I'm not sure what DOCTYPE you're using, but you get the idea. Now for the CSS:
If you want to position something relative to the page, it's a good idea to keep the margins of the page in mind. Assuming the default, you'll want to set any margins or padding to 0:
html, body {
margin: 0;
padding: 0;
}
Now, the positioning you've done on .addacomment is basically keeping you from getting the result you want. I've stripped out the unnecessary stuff for clarity:
.addacomment {
display: block; /* override the default inline display */
margin-left: 30px; /* The 30px from the left you wanted */
}
Next, .commentsubfield only needs margins added to it:
.commentsubfield {
margin: 30px 0 30px 30px;
[your other styles]
}
That should give you the following result (this is an actual screenshot from Opera 10.10 OSX), although I find separating the label from its field quite weird:
form element positioning example http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg
I would recommend keeping the input and corresponding label together.
Hope I understood your question correctly, and hope this helps.
How can I style HTML checkboxes, radio buttons and dropdowns? Or can I?
I'd like to use an image for checkboxes or radiobuttons, and the same for lists - the dropdown arrow doesn't look nice most of the time.
see this 2 links for jQuery Plugins for Styling Checkbox & Radio Buttons:
http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
Short answer: You can't do it nicely and consistently.
The answer you might want to hear, depending on your situation: Use jQuery or something similar, which will give you plenty of plugins to choose from.
These two are some of the better ones, as it will let you style just about all of the different controls.
You certainly can,
Checkboxes and Radio buttons are easy to customize with just css (no js).
The implementation (already mentioned by KunalB above) involves hiding the input and using the label (with the before pseudo element for the custom image) to trigger the input
Dropdowns on the other hand are a lot more difficult and to date there's no 100% pure-css + cross-browser solution... (Here's my S.O. answer for dropdowns)
LIVE DEMO for all 3: Radio buttons,Checkboxes and Dropdowns.
Custom Checkbox
h2 {
font-weight: bold;
margin: 20px 0 5px;
}
li {
margin: 0.5em 0;
}
/*#region checkbox */
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]~label {
display: inline;
font-size: 18px;
}
input[type="checkbox"]~label:before {
content: '';
border-radius: 0.2em;
border: 1px solid #333;
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin-right: 0.5em;
width: 32px;
height: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked~label:before {
content: '✓';
}
<h2>Custom Checkbox</h2>
<div>
<input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
<label for="RememberMe">Remember me</label>
</div>
Custom Radio Button
input[type="radio"] {
display: none;
}
input[type="radio"]+label {
display: inline;
font-size: 18px;
}
input[type="radio"]+label:before {
content: '';
display: inline-block;
width: 32px;
height: 32px;
border: 1px solid #222;
border-radius: 50%;
vertical-align: middle;
margin-right: 0.5em;
}
input[type="radio"]:checked+label:before {
content: '';
box-shadow: inset 0 0 0 0.6em white, inset 0 0 0 1em #333;
}
h2 {
font-weight: bold;
margin: 20px 0 5px;
}
ul {
list-style: none;
}
li {
margin: 0.5em 0;
}
<h2>Custom Radio Button</h2>
<ul>
<li>
<input type="radio" id="radio1" name="radios" checked />
<label for="radio1">Apples</label>
</li>
<li>
<input type="radio" id="radio2" name="radios" />
<label for="radio2">Pineapples </label>
</li>
</ul>
Custom Dropdown
select {
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none;
/* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
#media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<h2>Custom Dropdown</h2>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
This guy pretty much has all the styling you can put on form controls, but it's not consistent across browsers. You are going to have to go custom. Use a custom image for the checkbox, then change it's source to get the clicked version (and vice versa). The select menu might be a little trickier. I hope there's a jQuery plugin out there that can help you!
I believe CSS 3 will allow you to style those elements, but for now it isn't directly possible.
See this question: CSS checkbox input styling
You can style form elements, but it is difficult (impossible?) to get a consistent style across browsers and operating systems with a pure CSS approach. Some script manipulation of styles would also be required.
This is a very good article that discusses the options and issues: Styling form controls
Listamatic has a great collection of CSS list styles.
You can't put an image as a checkbox, but you can always build your own checkbox :D.
Put a hidden field and an image, add an "onclick" event over the image. When the onclick is fired check the status of the hidden field, change the image according to the status and save the status of the checkbox in your hidden field.
You should check for custom javascript libraries. One of my favorities is http://www.dojotoolkit.org/
Most likely you won't be able to, it is very difficult. Personally, I would just stay away from that.
You might find my post useful: http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/.
The basic idea is to hide the form element (checkbox/radio button) and style the label instead using CSS. Thanks to the :checked selector, it’s possible to distinguish between the two label states by assigning styles to label and input:checked + label assuming that the label follows the checkbox/radio button in your html code. Using a for attribute in the code makes the complete label click-able, modifying the state of the associated element.
Recently i come across amazing WTF, forms? from a creator of Bootstrap Mark otto. It has great styles for
Checkbox
Radio button
Select
Progress bar
File Browser
Checkout http://wtfforms.com/
You don't need any library for the same. You can do it on your own with pure CSS, and just a line of javascript/jquery.
You don't need any libraries for these.
You can put li'l logic and you can roll on your own.
A line of javascript/jquery, and everything CSS.
Guide here-
https://github.com/scazzy/CSS-FORM-UI