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 :-)
Related
I found a snippet of SCSS that I'm trying to use.
It contains CSS vendor prefixes that I'm unfamiliar with:
::-webkit-slider-runnable-track
::-webkit-slider-thumb
::-moz-range-track
::-ms-fill-lower
etc
I'd love to use Chrome or some other browser's "developer tools" / Inspect to be able to play around with colors and dimensions, but I can't find where these particular CSS rules are.
All I can find is my input element: <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
Currently, I'm editing SCSS in Netbeans, and it compiles to CSS on each save, and then I refresh my browser.
It's time-consuming, and I'd also really like to see where those rules take affect when I highlight an element in the inspector.
I appreciate any suggestions.
P.S. I figured there would be a way to show them, like there is for active, focus, hover, and visited rules.
The vendor prefixes are actually considered pseudo-selectors, and as such, create their own CSS selectors. You won't see them in the CSS states such as :hover and :active, but rather as independent CSS rules:
input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower
This is illustrated in the example below, which has different displays on the different browsers:
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}
<div class="container">
<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>
Hope this helps! :)
I finally could find an option on Chrome Dev Tools to show the user-agend pseudo-elements.
Basically you have to go to "Preferences" and scroll to the "Elements" section, where there is a option for that.
Webkit Pseudo Elements Documentation
Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
I have a CSS rule for input like this:
input {
border: 1px solid black;
}
The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:
instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:
I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:
<input type="checkbox" class="checkbox" />
Is there any way to reset the border style with the .checkbox rule?
I have tried:
.checkbox {
border: none;
}
which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:
.checkbox {
border: 1 none transparent;
}
but none of these seems to reset to the default style of the checkboxes in IE.
Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?
In many browsers, it's not possible to reset the checkbox back to the default native style.
This is probably the reason why CSS resets generally do not include a rule to this effect:
input {
border: 0;
}
The most compatible technique is to do this:
input[type="text"], input[type="password"] {
border: 1px solid black;
}
and explicitly list every type of input you wish to style.
See: http://jsfiddle.net/EPpJ9/
This will work in IE7+ and all modern browsers.
You could also do this more neatly with the not() CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:
input:not([type="checkbox"]) {
border: 1px solid black;
}
In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+
First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.
<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>
Next include some css:
#mycheckbox {
display: none;
}
Draw your checkbox using your label control, here is one I made:
#mylabel {
float: left;
margin-top: 11px;
background-color: #fff;
border: 1px solid #000;
display: block;
height: 12px;
width: 12px;
margin-right: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-position: left center;
}
You have to create a look for when the box is checked:
#mylabel.checked {
background-color: #808080;
}
Finally some jquery:
$(document).ready(function () {
$("#mycheckbox").change(function () {
if ($("#mycheckbox").is(":checked")) {
$("#mylabel").addClass("checked", "checked");
} else {
$("#mylabel").removeClass("checked");
}})
});
Don't forget to include the jquery libraries (put this in your head tag):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check out the fiddle to see it in action:
fiddle
Couldn't you include ie8-js to make IE8 recognize not() CSS3 pseudo-class?
http://code.google.com/p/ie7-js/
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.
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