Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I need this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?
I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.
http://i48.tinypic.com/raz13m.jpg (It says jpg, but it's a png).
I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?
This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.
My png method uses the css, js from the page you linked to, with these changes:
JS:
// Changed all instances of '== "styled"' to '.search(...)'
// to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
span[a] = document.createElement("span");
// Added '+ ...' to this line to handle additional classes on the checkbox
span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
CSS:
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0px; /* Removed padding to eliminate color bleeding around image
you could make the image wider on the right to get the padding back */
background: url(checkbox2.png) no-repeat;
display: block;
clear: left;
float: left;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
etc...
HTML:
<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>
Hope that makes sense.
Edit:
Here is a jQuery example that illustrates the principle with checkboxes:
http://jsfiddle.net/jtbowden/xP2Ns/
It sounds like you already know this, but the solution you linked to above actually replaces the checkbox with a span tag with an image to give the effect of a "styled" checkbox.
For most browsers like IE and Firefox, there are few (if any) options and very little support for styling checkboxes with CSS alone.
Jeff B's answer on how to edit the said solution is correct. Here is the implementation of his edit to the solution if someone needs to copy and paste.
JavaScript http://pastebin.com/WFdKwdCt
CSS http://pastebin.com/TM1WwSQW
I've found http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
a javascript + css solution thats works on win ie, win and mac: chrome, safari, firefox, opera. iOS Safari and chrome.
Related
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />
I have written a basic website that calculates SHA1 hashes. I know, there are already hundreds, but this was more to try my hand at designing than making something that a lot of people will use. An important part of my design was displaying the calculated hash in a textbox with the text auto-selected with JavaScript. This textbox has a CSS3 ::-selection pseudo element to change the color of the selected text so it doesn't look like a plain 'ol text box. Here is the CSS code:
#result::-moz-selection {
background: white;
color: red;
}
#result::selection {
background: white;
color: red;
}
I know I probably could have combined the selectors, but separating them was something I tried when this wasn't working. The HTML is a plain <input type="text" id="result">, along with a few other inconsequential attributes. You can see the full code at SHA1.in. Am I doing something wrong here? TIA!
BTW, I got my code from CSS Tricks.
Replacing your input element with a div seems to fix the issue. Apparently Chrome prevents overriding the selection colors for text inputs.
This is a reported bug: little link.
Debugging experience http://www.dmhermitage.org/wtfborders.pngThis is making me want to kill myself.
I have some really simple CSS to style my input objects:
input, button
{
border: 1px solid #c66600;
background-color: white;
color: #7d212f;
font-family: "Eras Light ITC", Tahoma, sans;
}
But I don't like the ugly border it puts around radio buttons, so I use a selector to kill the border:
input[type=radio] { border: none; }
You can probably guess what browsers this works in and which ONE it does not work in. What's funny is when I press F12 to launch the excellent developer tools in IE8 it actually tells me that the style of the radio buttons has been overridden to 'none' just like I asked it to do, but the border remains on the radio button objects.
I have tried a variety of semantic things, like setting the border width to 0px or the color to something insane like lime green, but it remains the originally assigned color that it got from the first style.
And finally, I have tried only styling 'text' objects, in which case no style is applied to anything. Again, the browser claims to fulfill the CSS selection, but it visually does not happen.
Thoughts?
By the way, this is a DotNetNuke installation with generated code where I can't explicitly set the style of the radio buttons.
Thanks,
Dan
IE8 appears to be rendering in quirks mode instead of standards mode, which always messes everything up in IE. To switch to standards mode, the easiest way is to replace the doctype on the first line of the document with this:
<!DOCTYPE HTML>
You may also want to look at some of the HTML being output. You have a span with ID dnn_dnnMENU_ctldnnMENU that contains dozens of made-up attributes like BackColor, SysImgPath, MenuItemHeightand so on. These will have no effect in most browsers (maybe IE interprets them specially, I dunno).
problem is...
Being most helpful ever, please notice, that somehow, your page get's rendered in quirks mode, thus in some screwed way nobody should ever use.
solution [edit]
due to: http://dorward.me.uk/www/ie8/
set your html 4 doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Just in case, have you tried with:
input[type='radio'] { border: none; }
Notice the addition of the apostrophe (or whatever you call the ' in your funny language :P)
I looked at the site, your CSS is correct and there is nothing I can help you with. Good luck!
You can remove the border by setting an inline style attribute in the developer toolbar to border: none;... So for some reason the style isn't applied to the radio-button although the style is traced correctly. Seems like some sort of bug.. Have you tried jacking up the specificity of the rule (it should already be higher than input, but just to try it out)?
For instance:
#page input[type=radio] {
border: none;
}
It's not possible with CSS anymore (as far as I know), but using this Javascript here it will be possible for you; Styling checkboxes and radio buttons with CSS and Javascript.
Nasty. Try specifying the border colour to white?
I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with
input
{
border-style: none;
}
in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?
Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.
I'm pretty sure this can't be done, but I thought I'd ask.
Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:
For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".
The input element itself would get a class that works the other way round, visible in screen and hidden in print.
Each input element would get a change event that updates the neighboring span.
I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.
I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)
If you are using Bootstrap:
#media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
I came across this searching for information on how to style my forms and a few other things.
After messing with some CSS I figured out a CSS only method that works for me.
My forms all have styling that involved color background and a border that is black.
In my print CSS file I copied my form css and changed all of the colors (not the text itself) to white. In other words it hides my text box and displays only the text.
Original CSS - #form textarea, #form input, #form select{ border:1px solid #ddd; color:#313131; }
Print CSS - #form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
Works like a charm =>
Hope this Helps
input { border-style: none; display: inline}
I'm using ASP.NET and had the same issue.
I solved it by adding a Label that corresponds to my Textbox, and had two classes set up:
In #media screen:
.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}
In #media print:
.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}
For the textbox, I assigned the hdnPrint class, and on the label, I assigned the visPrint class. When the user prints the form, the label is displayed and the form field is hidden.
I assume you can do something similar in a non-ASP.NET environment by following the same pattern.
No scripting required.
To define the width of the input fields in the CSS print section, use:
width: ?cm
for the corresponding input elements.
Tested in Firefox; maybe it wasn't working in previous versions of the browser.
For bootstrap this works for me.
It is based on user5712635s answer but I added the appearance properties to get rid of the down arrows on selection inputs.
#media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?
For Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
You can use the CSS property "outline" and value of "none" on the anchor element.
a {
outline: none;
}
Hope that helps.
For Internet Explorer 9:
a:active, a:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
Source: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a
Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.
(Keeping them in place also helps power users that don't like to use their mouse)
There is the same border effect in Firefox and Internet Explorer (IE), it becomes visible when you click on some link.
This code will fix just IE:
a:active { outline: none; }.
And this one will fix both Firefox and IE:
:active, :focus { outline: none; -moz-outline-style: none; }
Last code should be added into your stylesheet, if you would like to remove the link borders from your site.
include this code in your style sheet
img {border : 0;}
a img {outline : none;}
I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:
a, a:hover, a:active, a:focus, a img, object, embed {
outline: none;
ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
}
The code below is able to hide image border:
img {
border: 0;
}
If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:
input::-moz-focus-inner {
border: 0;
}
IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
This is the latest one that works on Google Chrome
:link:focus, :visited:focus {outline: none;}
in order to Removing The Dotted Outline href link you can write in your css file:
a {
outline: 0;
}
If the solution above doesn't work for anyone. Give this a try as well
a {
box-shadow: none;
}
-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)
Use Like This for HTML 4.01
<img src="image.gif" border="0">
You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.
I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.
a:active { outline: none; }
I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.
Hope this solves your problem.
I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.
I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:
a:hover,a:active,a:link {
outline: 0 !important;
text-decoration: none !important;
}
Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).
This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.
Hope this helps...Peace!
I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.
Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.
If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.
This works perfectly for me
a img {border:none;}
Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.
However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.
img { border-style: none; }
Yes we can use. CSS reset as a {outline:none} and also
a:focus, a:active {outline:none}
for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share