IE: Заполнитель для поля ввода влияет на ширину поля выбора

Question

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

Первый, который я нажимаю на поле выбора. Это работа, ширина области выбора, подходящая для выбора элемента управления. Но если я нажму на текстовое поле, тогда выберите поле, область выбора будет больше. Если я удаляю атрибут placeholder для поля ввода, он работает правильно. Я думаю, что это проблема интернет-проводника. https://jsfiddle.net/22v1og48/ Любые идеи по этой проблеме? Как еще сохранить местозаполнитель, но выбрать поле все еще работает правильно?

Answer 1

Единственный способ, которым я был в состоянии решить эту проблему, было удалить заглушку на фокус и установить его на размытие:

$('#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>

Обратите внимание, что в Т.Е. placeholder исчезают когда вы фокусируетесь, но это не то, как это работает в других браузерах (firefox/chrome), где местозаполнитель исчезает, когда вы начинаете вводить текст. Этот код изменит это поведение, но сделает select своим оригинальным размером.

Также обратите внимание, что я использовал jQuery для примера, но вы можете сделать то же самое без jQuery (это было только быстрее, чтобы написать этот пример, вот и все).