I simply don't find any instructions how to style a radio button like the div in my example here: http://jsfiddle.net/Q5SRe/
The div:
div {
width:50px;
height:50px;
background-color:green
}
also I would like that when the radio button is selected it has:
border: medium solid #000;
Radio buttons are part of the Shadow DOM, which as of yet can't be universally styled across browsers.
The best way currently to get custom radio buttons is to use images or the checkbox hack.
I have used this before, it is not cross browser compatible and I would recommend you keep things simpler, but that depends on your personal choice and use case
Related
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I would like to get an idea from you guys. I have 3 checkboxes that I would like to display one in each line inside a box, kind of like a text area. What Bootstrap tool would allow me to accomplish that?
I tried to create a text area and out my checkboxes in them, but the code is translated as text in the text area. So I could not do that. What's the way of doing it?
You shouldn't restrict yourself to using only Bootstrap elements when making your site. Bootstrap is just a collection of nifty elements; it's fine (and probably necessary) to make your own, too.
If you just want your checkboxes to be in a box with an outline, well, that's a bit too simple for there to be a corresponding Bootstrap element.
In the simplest form, the HTML and CSS for this would look like this JSFiddle.
Html
<div class='checkbox-container'>
<input type='checkbox' id='one'>
<label for='one'>Hello</label>
</div>
Css
.checkbox-container {
margin: 10px 0;
padding: 10px 0;
border: 1px solid #aaa;
}
If you want all of the checkboxes in a single box, then you can do that with just a bit more code. View on JSFiddle.
If for some strange reason you must only use use Bootstrap elements, ananda's answer is pretty good. Using the well element gives you a border, but also an inner shadow and a background color. View the well on JSFiddle
try putting them inside the 'well' element
How can I completely change the design of a element? i am trying to make drop down like following image, what i wrote is
<select>
<option value="0">Title</option>
<option value="1">Mrs</option>
<option value="2">Mr</option>
</select>
i am stuck at put custom image to open drop down list for dropdown and also how to style select element
Some form elements are notoriously hard to style with CSS alone and still appear visually the same across all browsers.
The recommended practice for styling SELECT elemets is generally to use a javascript solution as this will work cross-browser.
Have a look at Chris Coyle's article on this:
http://css-tricks.com/dropdown-default-styling/
You can't style elements such as select in such a way you described it. Things like background-color or border are possible.
Styling with CSS only could go as far like this:
select {
border-radius: 5px;
color: lightgrey;
font-weight: bold;
}
With this CSS you will have the round corners and the font changed.
What's not possible:
Change the icon
Change the background or font of the dropped down box
Try fiddling with javascript, nested divs and a hidden input field. Also a glance at http://jqueryui.com could help you quite much.
I want After click on the radio,
Radio-selected that background color is yellow putting background label, with use of css no js.
how is it?
Example of myself: http://jsfiddle.net/DVJmS/6/
Example of ui: http://jqueryui.com/demos/button/radio.html -> I not want use of plugin this is only a example.
Volia
What you need to do is:
wrap each <input /><label></label> in a <div>
give input[type="radio”] a width and height of 0px
Then add this rule to your css :checked ~ label {
background: #f00;
}
What that last one does is says if there’s a sibling of mine that is checked preceding me then make me have a background of #f00. Just change the alignment and colors to fit your site.
Also, you should never give two elements the same ID. If you want to be able to select two elements at once always uses classes.
css file:
.radio {
background: url(images/radio-off.png) no-repeat;
height: 21px;
width: 21px;
}
html file:
<input type="radio" name="sendmail" class="radio" value="send" />
It still doesn't show the background, it still shows the "classic" one. What am I doing wrong?
Thank you.
You didn't mention what browser you're using - this is important information.
The ability to style radio buttons (and form elements in general) varies a lot between different browsers.
See here: http://www.456bereastreet.com/lab/form_controls/radio_buttons/
The usual workaround is to use JavaScript to replace the radio buttons with custom elements, that you can style however you like.
For example: jqTransform.
You can't style radio buttons like that because they are native O/S controls.
The solution, for now anyway, is to overlay an element that mimics a radio button on top of the original radio.
Check out input enhancement libraries such as http://www.emblematiq.com/lab/niceforms/.
The best way to do this is with Javascript to ensure cross browser compatibility.
You can use the following script.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/