Вертикальное центрирование текста select-элемента - PullRequest
Новая
       6

Вертикальное центрирование текста select-элемента

0 голосов
/ 22 ноября 2018

Я создал небольшую ручку кода, чтобы проверить, как выровнять span, div, input и select элементы равномерно внутри контейнера.После многих проб и ошибок он работает в Chrome, Firefox и Edge.

https://codepen.io/anon/pen/QJQaVX

Но теперь проблема заключается в окне выбора.Текст, который показывает фактическое выделение, перемещается в нижнюю строку внутреннего текста.Это также видно в инспекторе.Удивительно, но Edge показывает ожидаемое поведение и центрирует текст.Но Chrome и Firefox не будут.Я пытался установить высоту строки без успеха.Даже display:flex ничего не меняет.

Есть ли правильное решение этой проблемы?

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

Я проверил ваш код и обнаружил, что семейство шрифтов: наследовать при вводе, выберите, текстовая область является дополнительной.

Наследует этосвойство из родительского элемента.Ключевое слово inherit указывает, что свойство должно наследовать свое значение от родительского элемента.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Ваш вход, select, div уже находятся в классе контейнера,font-family наследуется по умолчанию.

Вы можете изменить свой код следующим образом.

HTML. 

 <div class="container">
   <input type="text" value="TestText">
   <span>TestText</span>
   <div>TestText</div>
   <select>
     <option>Test</option>
   </select>
 </div>

CSS. 

input, select, span, div { 
line-height: 1.15em;
height: 1.15em;
box-sizing: content-box;
}

Result

0 голосов
/ 01 февраля 2019

После долгих проб и ошибок и комбинирования разных ответов от Stackoverflow я нашел решение, которое работает для меня на IE11, Edge, Chrome и FF.Все элементы имеют одинаковую высоту во всех браузерах.Все элементы используют размер шрифта от родительского элемента.Также нет необходимости в normalize.css или чем-либо еще.Я отключил стрелку раскрывающегося списка при выборе, но это не влияет на результат, если он включен.Разница только в текстовом отступе в поле выбора.В IE11 и Edge текст начинается с небольшого отступа с левой стороны.В Firefox мне удалось решить эту проблему.

https://codepen.io/auskennfuchs/pen/xMqVgG

.formcontrol {
  font-size: inherit;
  padding: 0.5em 0;
  margin: 0;
  line-height: @form-height;
}

input, select, button {
  border: 0;  
  height: @form-height;
  box-sizing: content-box;
}

Конечно, использование flexbox намного проще, но есть ситуации, когда flexbox не помогает, напримерАдаптивный макет из 2 столбцов с элементами формы.

0 голосов
/ 22 ноября 2018

Я обновил код для вас и поиграйте с полем дополнения и содержания.это будет работать во всех браузерах.

Проверьте это codepen 

<div id="container1">
    <input id="textbox" type="text" value="Test" />
    <span>TestText</span>
    <div>TestText</div>
    <select id="dropdown">
        <option>Test</option>
    </select>
</div>


#container1 input[type="text"], 
#container1 select, 
#container1 span, 
#container1 div {
    padding: 1em;
    border: 1px solid #ccc;
    line-height: 16px;
    height: 16px;
    font-size: 14px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    margin: 10px 10px 0px 20px;
}
...