input:focus {
background-color: #f00;
}
Works exactly as expected in every browser I’ve used except for Internet Explorer. What is it with IE that needs to be done so that I can change the background-color upon focus?
Is this happening in the latest version of IE?
This is happening in IE 11 and 10. I haven’t tested on anything below 10.
The code you are showing above works fine in ie10 and 11 so there must be something else going on. Do you have a link to the working page or at least a working demo of the problem?
I assume you are not forcing IE into ie8 mode with the IE meta tag?
I can take my page, put it on my desktop, open in IE and the input:focus selector works as expected. But when I upload the page to our server and view the page the selector doesn’t work.
None of the CSS is linked to an external file and all of the other CSS properties show up fine except for the input:focus selector. I tried this on some other machines with IE and got the same result.
Why would this be happening?
Here’s the code…
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #fcfcfc;
cursor: default;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
}
h2 {
background-color: #f0f0f0;
padding: 3px;
text-align: center;
margin: 0;
}
h3 {
text-align: center;
color: #7a7a7a;
}
input, select, textarea {
width: 345px;
}
input:focus, select:focus, textarea:focus {
background-color: #e9edfe;
}
input, select {
height: 30px;
font-size: 1.3em;
}
textarea {
height: 45px;
}
#notifications {
height: 32px;
}
#notification {
height: 23px;
font-size: 14px;
color: #14c221;
text-align: center;
font-weight: bold;
padding-top: 7px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 539px;
height: 366px;
}
#left-container, #right-container {
height: 100%;
width: 60px;
float: left;
}
#left-container {
padding-right: 30px;
}
#right-container {
padding-left: 30px;
}
#left-container button, #right-container button {
width: 100%;
height: 100%;
}
#form-container {
width: 351px;
border: 1px solid #ddd;
padding: 3px;
background-color: #fff;
float: left;
}
#save-button {
width: 345px;
height: 47px;
margin-top: 16px;
font-size: 1.15em;
}
.input-title {
margin-top: 10px;
font-size: .8em;
padding-left: 2px;
}
</style>
</head>
<body>
<div id="notifications">
<h3 id="notification"></h3>
</div>
<h3 id="record-count">0/0 records</h3>
<div id="container">
<div id="left-container">
<button id="left-button" onclick="changeTest(-1)"><</button>
</div>
<div id="form-container">
<h2>Form</h2>
<div class="input-title">Field One</div>
<div>
<input type="text" id="fieldone" maxlength="50" />
</div>
<div class="input-title">Field Two</div>
<div>
<input type="text" id="fieldtwo" maxlength="50" />
</div>
<div class="input-title">Field Three</div>
<div>
<input type="text" id="fieldthree" maxlength="50" />
</div>
<div class="input-title">Field Four</div>
<div>
<input type="text" id="fieldfour" maxlength="50" />
</div>
<div class="input-title">Field Five</div>
<div>
<select id="fieldfive">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</div>
<div class="input-title">Field Six</div>
<div>
<textarea id="fieldsix"></textarea>
</div>
<div>
<button id="save-button" onclick="saveTest();">Save</button>
</div>
</div>
<div id="right-container">
<button id="right-button" onclick="changeTest(1)" disabled>></button>
</div>
</div>
</body>
</html>
I copied the code to a file, uploaded it to a server and opened it in IE11 and IE8… both show a background-color change in the input fields on :focus.
Do you have a link to the site in question so we can test ourselves?
All can think is that you are triggering quirks mode (perhaps if in an intranet) or you have set your site into another mode with compatibility settings.
As Ron confirms above the code will work fine in modern versions of IE.
The site is on our intranet so I can’t provide a link, but I think the issue is on my end with our server or machines. I’ll investigate and post a solution if I found it. It’s strange.
Try forcing the issue with the following meta tag.
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It should be the first meta tag in he page.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
etc...
That worked! How strange. I’ve never run into this before. Thanks a ton.
It’s not so strange if you know that IE automatically switches to Compatibility Mode (= IE7) when a page on an intranet is requested. Which can be counteracted with the X-UA tag.
I’ve not heard that before. Can you cite a reference, please?
I too am curious about this. I tried a Search but I guess I don’t know the terms to use.
I am particulary interested in how IE would know it’s an intranet vs. the internet, and how a localhost would be considered differently than an intranet.
The best reference I can’t, but the interweb seems full of it: https://www.google.nl/search?q=internet+explorer+intranet+compatibility+mode .
That is explained here: http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx.
Thanks, that explains it. IE knows intranet sites based on sites entered into my IE options settings and “assumes” they must be IE 7 compatible.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx seems to be a good explanation from MS.
Thanks.
You’re more than welcome, but I would think it is the other way around. IE8+ defaults to Comp. Mode unless ‘Display intranet sites in Compatibility View’ at Tools -> Compatibility View Settings is unchecked. The only exception it makes by default for intranet sites is when the URL starts with ‘localhost’ or ‘127.0.0.1’.
That’s what the MSDN blogger writes, and in my IE9 the option is checked, while I can’t remember ever having it checked it myself.
Yes I mentioned in post #8 that about intranet settings and by default IE displays intranet sites in compatibility view. Just go to Tools, Compatability settings and you will see the check box checked by default. (It wasn’t until post #9 however that the OP mentioned it was on an intranet so I guessed right again :))