I created this to simply explain my problem. It is of some list items being displayed as inline blocks. I had an original method that didn't work either, so I used this CSS.
http://jsbin.com/upexu/edit
This works great in FF and IE7, as a standalone.
Unfortunately, in my implementation on my site, it doesn't display correctly in IE7 (they appear stacked one above the other).
Firefox
IE7
Now can anyone tell me why they don't work in my example (see images above and look at site, it is in the far right (can't miss it).
It seems to work in IE7 if I give the list items an explicit width - but this seems dangerous, as well as an extra piece of maintenance I don't want to do. I could probably do li#nsw { width: 3.5em } but is ugly and I shouldn't have to.
I do use Eric Meyer's CSS Reset Reloaded.
If you know of a solution, please tell!
Thanks.
Update
Here is the HTML of the checkboxes
<ul class="checkboxes">
<li><input type="radio" id="free-case-review-nsw" value="nsw" name="state" /><label for="free-case-review-nsw"><acronym title="New South Wales">NSW</acronym></label></li>
<li><input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /><label for="free-case-review-qld"><acronym title="Queensland">QLD</acronym></label></li>
<li><input type="radio" id="free-case-review-nt" value="nt" name="state" /><label for="free-case-review-nt"><acronym title="Northern Territory">NT</acronym></label></li>
<li><input type="radio" id="free-case-review-other" value="other" name="state" /><label for="free-case-review-other">Other</label></li>
</ul>
And here is the CSS
#free-case-review-form .checkboxes {
border: 1px solid #000;
padding: 5px 0;
margin-bottom: 8px;
overflow: hidden;
}
#free-case-review-form .checkboxes li {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* for ie */
zoom: 1;
overflow: hidden;
}
#free-case-review-form .checkboxes li input {
display: inline;
width: auto;
border: none;
margin-bottom: 0;
padding: 0;
float: left;
}
#free-case-review-form .checkboxes li label {
display: inline; /* just an attempt - they should be block level anyway */
float: right;
}
Though I do recommend looking at the site above, as a lot more CSS is inherited, especially by using the style reset.
Far as I can tell, it's the "float: right" on the css for the label. Whatever you are doing, try doing it without setting the float: right on the label.
when I removed "float: right" it went back to inline on my IE.
Most likely, you accidentally triggered hasLayout on 1 of the children, either the input or the label
Related
I'm unable to remove the dotted border/outline around the selected/focused option in the multiple size select. It appears like this:
I have tried several things such :
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
outline: none;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
None of it seems to work. Here's the JSFiddle Link: https://jsfiddle.net/esdgujft/
Edit: This appears only in Firefox browser-
You can change the style of the select, but not that of the option, because that depends on the broswer you're using.
See also:
How to remove border of drop down list : CSS
This might be a solution, but it contains javascript:
https://www.w3schools.com/howto/howto_custom_select.asp
Styling options in selects is still not widely supported in 2020. If you're lucky, you might be able to style the font, color and background color, but that's pretty much it.
At least today, most browsers actually paint select boxes themselves. In the dark ages of the web, most browsers used the system toolkit directly to paint these.
If you absolutely have to fix this Firefox paint issue, I would suggest building a html/javascript solution which implements a select client side. Most UI libraries have this already built in.
Otherwise, I would suggest not using select boxes if possible. It has been noted in usability studies that select boxes are more confusing for users than simple radio buttons (or check boxes for multiple-select). As a bonus effect, radio buttons grouped together inside a form field can be styled much better in browsers. You can even style them to look like a select box.
For example, this simple code will pretty much mimic a select, but with much greater stylability. Though, you'll probably want to add a few keyboard event listeners to enable keyboard navigation.
<formfield>
<legend>Choose:</legend>
<div class="select">
<input type="radio" name="choice" value="choice-1" id="choice-1" checked/><label for="choice-1" tabindex=3>Choice 1</label>
<input type="radio" name="choice" value="choice-2" id="choice-2"><label for="choice-2" tabindex=3>Choice 2</label>
<input type="radio" name="choice" value="choice-3" id="choice-3"><label for="choice-3" tabindex=3>Choice 3</label>
<input type="radio" name="choice" value="choice-4" id="choice-4"><label for="choice-4" tabindex=3>Choice 4</label>
</div>
</formfield>
<style type="text/css">
.select {
display: flex;
flex-direction: column;
border: 1px solid #00000099;
width: 200px;
}
.select label {
padding-right: 0.5rem;
padding-left: 0.25rem;
}
.select input[type=radio] {
display: none;
}
.select input[type="radio"]:checked+label {
background: lightblue;
}
</style>
But as I said earlier, it is possibly more intuitive/user friendly to just use regular radio buttons. As a general rule-of-thumb, they have better affordance than select boxes.
I'd just like to change the background color and remove the border so that I have a white square.
There's a working hack (except on IE) where you can hide the input and put a span element in its place that works just as well, except it hides the checkmark (the :checked status) and it requires you to use your own image.
From another StackOverflow answer:
.myCheckbox input {
display: none;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.myCheckbox input:checked + span {
background: url("link_to_another_image");
}
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
I'd like to use the default checkmark.
You can't style checkboxes. This is always accomplished via one hack or another. This is really a dup of this question. There are ample resources available there, I won't attempt to repeat them.
I'm trying to hide a radio-button and use :before to create a custom one.
Here is my CSS:
input[type=radio]{
display: none;
}
input[type=radio]:before{
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin-bottom: 0;
border: 1px solid #ddd;
}
I expect this to generate an empty square. The problem seems to be that when I apply display: none to my input, this also effects the :before element.
Try this
<input type="radio" id="r1" name = "r1" class="rdb" style="visibility:hidden" />
<label for="r1">Male</label>
<input type="radio" id="r2" name = "r2" class="rdb" style="visibility:hidden" />
<label for="r2">Female</label>
Live Demo
Just change the radio itself to be 0px wide by 0px high: so the pseudo element is shown but the radio itself is not visible.
input[type=radio]{ width:0; height:0;}
Example http://jsbin.com/AYIGuyi/1/edit
That is expected behaviour. :before and :after are applied INSIDE elements and so obey the the same display rules.
I think the Checkbox Hack might be what you need.
CSS-Tricks article
Or, there is another way, without using labels:
Set visibility: hidden; to a radio button
Set visibility: visible; to its ::before pseudo element
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.
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