css :focus not working in iOS Safari/Chrome, fine on Android/PC Chrome
If you can try to add a ontouchstart="" to the <body> tag it might work.
I'm not so sure about a CSS only solution.. =(
EDIT: Take a look at this as well.. LINK
Updated jsfiddle
<body ontouchstart="">
<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
<ul class="layouts level-1">
<li class="open selected "><a class="open selected " href="#"> Page 1</a>
</li>
<li class="open "><a class="open " href="#"> Page 2</a>
</li>
<li class="open "><a class="open " href="#"> Page 3</a>
</li>
<li class="open "><a class="open " href="#"> Page 4</a>
</li>
</ul>
</div>
</div>
</body>
focus() not working in safari or chrome
I got the answer on my own, it might seem weak, and too simple, but it works.
Ready for this awesomeness..?
Just add a timer of 0 to the focus...for some reason it just gives it enough time to fully load the input into the DOM.
function recipientDivHandler(code, element) {
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
setTimeout(function() {
$("#toInput").focus();
}, 0);
}
If someone else can further explain this or has a better answer please feel free to take the stage :-)
CSS :focus not working
If you want a real focus state to a div element, you can add a tabindex attribute to it.
.row { display:inline-block; border:1px solid grey; height:200px; width: 200px; line-height:1em; background: grey; margin: 5px; opacity: 0.1;}
.row:active, .row:focus { background: orange; } <div id="main" class="container"><div class="row" tabindex="1" id="row0"></div></div>Css :focus working on firefox only. Other browser not supporting
In Chrome, the element loses its focus when you give it display: none.
Solution: hide it in another way, e.g. by giving it z-index: 100; (or anything that is less than the z-index of the close button).
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
*{padding:0;margin:0;}
body{ font-family:Verdana, Geneva, sans-serif; background-color:#CCC; font-size:12px;}
.label-container{ position:fixed; bottom:48px; right:105px; display:table; visibility: hidden;}
.label-text{ color:#FFF; background:rgba(51,51,51,0.5); display:table-cell; vertical-align:middle; padding:10px; border-radius:3px;}
.label-arrow{ display:table-cell; vertical-align:middle; color:#333; opacity:0.5;}
.float{ position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#F33; color:#FFF; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999; z-index:1000;}
ul{ position:fixed; right:40px; padding-bottom:20px; bottom:80px; z-index:100;}
ul li{ list-style:none; margin-bottom:10px;}
ul li a{ background-color:#F33; color:#FFF; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999; width:60px; height:60px; display:block;}
ul:hover{ visibility:visible!important; opacity:1!important;}
.my-float{ font-size:24px; margin-top:18px;}
a#menu-share i{ animation: rotate-in 0.5s;}
a#menu-share:hover > i{ animation: rotate-out 0.5s;}
@keyframes bot-to-top { 0% {bottom:-40px} 50% {bottom:40px}}
@keyframes scale-in { from {transform: scale(0);opacity: 0;} to {transform: scale(1);opacity: 1;}}
@keyframes rotate-in { from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes rotate-out { from {transform: rotate(360deg);} to {transform: rotate(0deg);}}
a#menu-share + ul { visibility: hidden;}
a#menu-share:focus + ul{ visibility: visible; animation: scale-in 0.5s;}
a#menu-share:focus { /* display: none;*/ z-index: 100;}<a href="javascript:void(0);" class="float" id="menu-close"><i class="fa fa-times my-float"></i></a>
<a href="javascript:void(0);" class="float" id="menu-share"><i class="fa fa-share my-float"></i></a>
<ul><li><a href="#" id="menu-facebook"><i class="fa fa-facebook my-float"></i></a></li><li><a href="#" id="menu-google-plus"><i class="fa fa-google-plus my-float"></i></a></li><li><a href="#" id="menu-twitter"><i class="fa fa-twitter my-float"></i></a></li></ul>jQuery .focus() and .blur() not working in Chrome or Safari
I thought about it on the drive home last night and figured it out on my own, it may not be the most elegant solution, but it certainly works.
$(document).ready(function()
{
$("textarea, input, select, .radio, .checkbox").click(function()
{
$("form li.over").toggleClass("over");
$(this).parents("li").toggleClass("over");
});
});
Thanks anyway!
Safari: focus event doesn't work on button element
This might fix the issue: https://stackoverflow.com/a/1269767/2731261
$(".btn").mouseup(function(e){
e.preventDefault();
});
Related Topics
How to Have Different Colored Left and Top Borders in CSS with Straight Join
Linear-Gradient to Transparent Bug in Latest Safari
Does the CSS Flexbox Module Work on Direct Child Elements Only
CSS Which Takes Precedence, Inline or the Class
How to Validate CSS on Internal Web Pages
Label on the Left Side Instead Above an Input Field
What Is the Em Font-Size Unit? How Much Is It in Pixels
How to Indicate Long Text into a Smaller Fixed Column with CSS
Tcpdf Not Render All CSS Properties
Table Border Color in CSS with Border Collapse
CSS Layout, Use CSS to Reorder Divs
How to Set Background Image in Submit Button
Css: Background Image Does Not Fill When Scrolling
How to Center Block of Inline-Blocks
Compiling and Maintaining Ie-Specific Stylesheets
Fonts Are Not Rendered Correctly in Release Mode, But Is Working on Debug Mode in Asp Net Webforms