Please check out my JSFiddle
https://jsfiddle.net/WK2N3/1/
#searchbar {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #bdbdbd;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, âTimes New Romanâ, serif;
color : #333333;
}
#searchbar:focus {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #2e9afe;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, âTimes New Romanâ, serif;
color : #333333;
-moz-box-shadow: 0 0 2px #2e9afe;
-webkit-box-shadow: 0 0 2px#2e9afe;
box-shadow: 0 0 2px #2e9afe;
}
input:focus {
outline : none;
}
<form><input type="text" id="searchbar" autofocus="autofocus"/></form>
How can I make this on autofocus like it is for chrome, safari, opera and firefox for IE?
Here's a one-liner (well, one line of actual logic) that uses jQuery to make autofocus work in IE. It bails out if the focus is already set--in other words, in any HTML5-capable browser.
$(function() {
$('[autofocus]:not(:focus)').eq(0).focus();
});
I explained how it works in my blog. And here is an updated jsFiddle that works in IE.
You will have to rely on javascript to do this, since html5 autofocus is not supported in IE. There is a good blog post about it here : https://www.html5tutorial.info/html5-autofocus.php
Basically, you first check if the attribute is supported, and then use javascript to manually focus in said input using the focus()
method if it is not.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With