I'm designing a html page with strict doctype and there's a form element in my page.
What I want to do is to change background-color of inputbox when mouse touches my form. I've done this with css :hover selector on form tag, but problem is that IE only understands hover on "a" tag!
I've googled my problem and what I found is to:
using an htc file;
using javascript to create a hover class on elements;
creating a big "a" tag and put all elements inside it;
but I don't want to do any of these solutions!
Isn't there any better way to fix this problem in IE?
My HTML Code:
<form id="footer-search-form" title="Search" action="#action">
<fieldset>
<input type="text" class="footer-search-input" id="q" name="Search"></input>
<input type="button" class="footer-search-button" title="Search" value="Search"></input>
</fieldset>
</form>
My CSS Code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: and after hours of searching I did it by using js:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"
and
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
I hate it, but it seems that there's no better way...
You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.
IE has supported :hover on any element since IE8 (or even IE7? I don't remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn't have an auto-updater - it really needs one), but for something as simple as this aesthetic effect you really don't need to worry about support in old relics.
Related
I'm having some troubles using a link and an input element simultaneously, which is pretty odd!
CSS transitions are being fired upon load, even tho I'm using an hover effect and only if the input element is present on the site. All this is for Chrome, haven't tested this in other browsers.
Here is my code simplified to the issue at hand:
HTML:
<input type="text" placeholder="Test search" />
Test
CSS:
a {
background: #000;
transition: background 3s ease;
}
a:hover {
background: none;
}
Link to example: https://embed.plnkr.co/ri5FknRdbPDY7T2lNldS/ Try and refresh the live preview a couple of times to see the issue. (This will not work on JSFiddle or Codepen, simple because they use internal styles. To reproduce this problem the styling has to come from an external stylesheet which is why I created this on Plunker.)
If I inline the css code in style tags in the head, there is no problem. If I remove the input element, there is no problem either. And it seems only to be a problem on link elements.
What is going on here? :)
- Thanks!
This is a Chrome bug, and it has been reported.
A hacky way to fix this is to include a script tag somewhere on the site.
Let's say I have a basic webpage:
<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>
Now let's say that I want the label text to be red when it's unchecked and blue when it's checked. How would I do this? I want something as basic as the following. Here, I use a hypothetical operator "<", which would mean "has the child", but of course it won't work, as there's no such operator:
#THE_LABEL{
color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
color:blue;
}
Everything but the theoretical "<" is valid CSS, which makes me wonder if there's a real way to achieve this behavior. Does anyone know of a valid CSS 3 (or lower version) way to style a label based on the state of its checkbox, without using JavaScript?
You shouldn't be putting the input field within the label.
Since the contents of the label appear after the checkbox, just make your HTML this way:
<INPUT TYPE=checkbox ID="THE_CHECKBOX"/>
<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>
And then use this CSS:
#THE_LABEL {
color: red;
}
#THE_CHECKBOX:checked + #THE_LABEL {
color: blue;
}
Live demo
The + is a sibling selector. It is not supported by IE8 and below.
Sorry, see:
Is there a CSS parent selector? and Complex CSS selector for parent of active child
for more discussion about this topic, but it doesn't seem to be possible.
I believe this will work in CSS4, but that's really just theoretical for now:
#THE_LABEL{
color:red;
}
#THE_LABEL /for/ :checked {
color:blue;
}
JSFiddle test
Browser Support
I come back to this every couple months just to check. Here's the support status for modern versions of the following layout engines:
WebKit: NO (Safari, iOS web views)
Blink: NO (Chrome, Chromium-based browsers, many open-source projects, Android web views)
Gecko: NO (Firefox, many open-source projects)
Trident: NO (IE, Windows web views, Steam)
EdgeHTML: NO (Microsoft Edge)
The CSS has selector is slowly being implemented across browsers.
Currently, according to caniuse.com, it has 56.19% support globally.
Using this selector you can achieve what your original question asked for: styling a label based on the checked state of a nested checkbox.
The codepen showing the example is here and the html used in the example is below. Note, this will work in Chromium browsers but not in Firefox at the moment (see the canIUse page referenced above for more on supported browsers).
<style>
label {
color: red;
}
label:has(> input[type='checkbox']:checked) {
color: blue;
}
</style>
<label>
Me blue when checked.
<input type="checkbox">
</label>
I know this question has been asked before, but I'm having some difficulty getting it to work in IE9. I have an html page with 3 forms in it (since each form contains a request to a different resource on a website). The html looks like this:
<form action="/SomeController1/Action" method="get"><button name="action" value="someValue">Request the first thing</button></form>
<form action="/SomeController2/Action" method="get"><button name="action" value="someValue">Request the second thing</button></form>
<form action="/SomeController3/Action" method="get"><button name="action" value="someValue">Request the third thing</button></form>
I'm trying to disable the blue glow that is showing up on all three buttons when the page loads. I think it looks really confusing...
The solution that I'm trying to implement, which doesn't seem to be working, is:
button
{
outline-width: 0px;
outline: none;
}
At any rate, the glow doesn't appear in Firefox or Chrome, it just seems to be appearing in IE. I suppose I could just use one form and put 3 buttons in it, but this seems a bit more like a workaround rather than a solution. Is there any way to do this using CSS or javascript? Any help will be appreciated!
Thanks!
Edit - Here's an image of the problem:
I was just hoping to get rid of the blue color.
You can't just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.
You can only remove the blue inner glow if you're willing to style a decent looking button yourself, starting with setting a border/background (which disables using the native style).
with 'glow' you mean a border? in that case, just do;
button { border: 0; }
I don't have IE 9 to test---but generically in CSS, you should try
button:focus {
outline:none;
box-shadow:none;
}
Adapted from "Removing the blue glow from an HTML text input when selected".
Is it possible to style the HTML checkbox without using javascripts?
This code for example will work fine with IE, but not on Firefox or Chrome.
http://jsfiddle.net/5wJxF/
Any suggestions?
YES. It is possible.
You can't directly style the checkbox element, but the effect you're looking for can be achieved if you use a <label> element in conjunction with the checkbox, and style that.
<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label here</label>
And then your CSS would look like this:
.mycheckbox {
display:none;
}
.mycheckbox + label {
padding:20px; /*or however wide your graphic is*/
background:url(/fancy-unchecked.gif) no-repeat left center;
}
.mycheckbox:checked + label {
background:url(/fancy-checked.gif) no-repeat left center;
}
Here is a working example: http://jsfiddle.net/TVaPX/ (tested with Firefox 5)
The trouble with this approach is that it only works in modern browsers. Older browsers may not support the :checked or + CSS selectors. But if you're okay with not supporting older versions of IE, then this will work. The example above does not work in IE8 (it supports + but not :checked).
If you're not comfortable with that, then you'll have to stick with a Javascript solution.
However, with an approach similar to this, you can still do it with very minimal amounts of Javascript code: simply have a one-line JS that toggles the class of the checkbox when it's checked, and you can use all the above code, but with the alternate classname instead of the :checked selector. That will work in IE7 and IE8.
Hope that helps.
No, it is not possible. The appearance of the checkboxes is OS- and browser-specific. Only JavaScript-based solutions let you style them in a way that will work across all browsers.
You might like this plugin. It's easy to use and gives satisfying results.
You can style it with CSS3(Chrome or Safari only!), but for anything esle - no other way that js.
There are 40+ examples here: FORMS ENHANCEMENTS DEMOS
There are some plug ins - I used to use jNice - not just pure CSS3 for modern browser and standard checkbox/dropdown for anything else.
Best Regards,
Pete
On the page there are links displayed with CSS as buttons:
HTML:
<a class="button" href="#">Button</a>
CSS:
a.button {
display: block;
position: relative;
width: 50px;
height: 50px;
background-color: $00f;
}
a.button:hover {
background-color: $f00;
}
I have some main concerns:
The href value is encrypted, thus will appear messy and ugly when the address shows in the browser when the user hovers over the link:
http://mysite.com/shjfgkh53hhsfd9ah390503hh35323j5hj35909ufudufdjj3
Also the href value will become significantly longer because I can't transfer POST parameters (everything's done by GET).
I could however, use this:
HTML:
<input type="button" class="button" href="#" />
And then set the bg in CSS. I'm just not sure whether using pseudo classes like :hover is correct and standards compliant here. I personally thought :hover, :active, :visited etc were meant for links (i.e. a tags).
Clarifying this would really help me out a lot. Thanks!
They may not work correctly IE6, but all current browsers support this, and the spec doesn't forbid it: See here for the spec.
What matters is what's supported by browsers. Honestly, if they're using IE6 and something doesn't work...in this case it's not a breaking lack of functionality, your site works just fine even without. I'd say you're perfectly in the clear here.