IE：输入字段的占位符会影响选择框的宽度

Question

<form>
 <input type="text" placeholder="some text">
 <select>
  <option>op1</option>
  <option>op2</option>
  <option>op3</option>
 </select>
</form>

The first I click on select box. It's work, width of select area fit to select control. But If I click on text field then click to select box, the select area look larger. If I remove placeholder attribute for input field, it work properly. I think this is the issue of internet explorer placeholder. https://jsfiddle.net/22v1og48/ Any ideas for this issue? How to still keep placeholder but select box still work properly?

Answer 1

The only way I was able to fix this issue was to remove the placeholder on focus and set it back on blur:

 $('#a1') .data('placeholder', $('#a1').attr('placeholder')) .focus(function() { $(this).attr('placeholder', ''); }) .blur(function() { $(this).attr('placeholder', $(this).data('placeholder')); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="a1" type="text" placeholder="some text"><select> <option>op1</option> <option>op2</option> <option>op3</option> </select> </form> 

Note that in IE the placeholder disappear when you focus, but this is no how it works in other browsers (firefox/chrome), where the placeholder disappear when you start typing. This code will change this behavior, but will make the select keep it's original size.

Also note that I used jQuery for the example, but you can do exactly the same without jQuery (it's was only faster to write this example, thats all).