I have the following css in my app that makes my checkboxes much more gray. This solution will not work in IE 11. How can I fix this?
input[type=checkbox][disabled] {
filter: invert(25%);
}
The filter css property is not supported by IE, even with -ms prefix. You can read about this at the MDN. So short answer: It is not possible to achieve this with the filter Property in IE.
You could try to write a workaround using the :before pseudo selector, like in the quick example below. I used a label while hiding the actual checkbox. Please note, that the appearance of checkboxes depend on the browser, so this "fake" checkbox may looks different than other enabled checkboxes, so I would recommend you to also style these! It is more work to do, but this is a workaround, not a solution ;)
input[type=checkbox][disabled] {
display: none;
}
input[type=checkbox][disabled] + label:before {
content: " ";
display: inline-block;
height: 12px;
width: 12px;
background: rgba(0,0,0,0.25);
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 5px;
}
input[type=checkbox][disabled] + label {
color: #aaa;
}
<input type="checkbox" id="1" disabled/>
<label for="1">Disabled</label>
If you actually want to know how to make custom checkboxes with CSS, you may want to take a look at this SO post, which already delivers a great answer to this problem :-)
I have a on my page and I have styled it with css.
input[type=range] {
-webkit-appearance: none;
background-color: #1b2b66;
width: 300px;
height: 3px;
position: relative;
top: -9px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("../images/slider.png");
background-size: 100% auto;
border: 0px;
width: 35px;
height: 35px;
}
The issues is: on the ipad when the user clicks the slider thumb a black border surrounds the image. How do I hide this?
You need to use modernizr to perform a feature detect.
<script src="modernizr.js"></script>
<script>Modernizr.load({
test: Modernizr.inputtypes.range,
nope: ['use your css to define the range input format']
});
</script>
This test looks for support. When it fails, it loads your css to format that input. If a browser has support for this tag, which means there will be a standard way it renders that control and your css will be redundant. In this case, we usually just let the browser ignore our css settings.
If you really want to override the default css settings. Try using !important.
border: 0 !important;
I figured out my issue. First of all thank you everyone for the help.
I forgot to set the background-color: property. I set it to #FFF and now have the desired effect.
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.
I have a drop down menu that I have styled using CSS and a Jquery plugin named: Selectbox. http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Everything is working great and looks perfect in Firefox, Chrome, and Safari. But for some reason when I click the drop down box in Internet Explorer the drop down floats all the way to the right and not directly beneath the drop down. I have only been coding 3 months so it could be a really stupid mistake but I can't seem to figure it out. Any help would be appreciated.
Here is the HTML:
<div class="foldersoption">
<select name="Items" id="Items">
<option value="option1">My Items</option>
<option value="option2">Shoes</option>
<option value="option3">Birthday Ideas</option>
</select>
</div>
Here is the CSS:
.foldersoption{
float: left;
margin-left: 25px;
}
div.selectbox-wrapper ul li {
border: 1px solid #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
list-style-type: none;
padding: 5px;
text-align: left;
width: 243px;
}
.selectbox {
cursor: pointer;
display: block;
float: left;
font-size: 15px;
height: 25px;
padding-left: 5px;
text-align: left;
width: 250px;
}
Can you help please?
Apply zoom and position relative to the foldersoption element, and other elements as needed. For example:
.foldersoption {
zoom: 1;
position: relative;
}
This will force IE to treat it like the other browsers do. IE doesn't handle floating very well - you have to give it some additional configuration & constraints in order for it to work properly.
Edit: Based on the screenshots, IE is complaining about security issues - is there a chance it is blocking certain scripts from loading as well? Try disabling or reducing the security in IE and see if the menu drops.
Edit #2: Actually that plugin you used is old and does not appear to be well tested or maintained. Can I suggest an alternative?
http://plugins.jquery.com/project/jQuerySelectBox
You can see an example here: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/
I tested it in IE7 and it seems to work ok. Seems extremely simple to set up, and to change the appearance you only need to change or override the default CSS styles.
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