无法在OS X的Safari中聚焦零尺寸输入

Question

I can't focus on the input if I set it to zero size in Safari 9.1.3 for OS X.

 function doFocus() { document.querySelector("#input").focus(); } 

 input[type="text"] { /* make input zero size */ border: none; width: 0; padding: 0; border-bottom: 2px solid transparent; transition: width .2s; } input[type="text"]:focus { border-bottom-color: #999; width: 200px; } 

 <input type="text" id="input" placeholder="(placeholder)" /> <button onClick="doFocus()">Focus</button> 

Reproduced here: https://codepen.io/kevinptt/pen/baoOXB

Answer 1

@kevin Lin I don't have an iphone so i haven't tested it but I think visually hiding input will work for you.

 .visuallyhidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } // add this class when input will get focus .reset-visuallyhidden { position: static; overflow: auto; clip: none; height: auto; margin: 0; padding: var(--padding, 0); border: 0; }