Центрированный текст в html выберите с помощью CSS в Safari - PullRequest
Новая
       9

Центрированный текст в html выберите с помощью CSS в Safari

2 голосов
/ 12 февраля 2020

Я пытаюсь центрировать текст внутри HTML формы выбора с помощью CSS, он работает на любом браузере, кроме Safari, я пробовал с text-align: -webkit-center;, но он не работает. 

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

label.cw-select {
  display: inline-block;
  position: relative;
}

.cw-select select {
  background: #4d4d4d;
  border-radius: 0.3rem;
  border: 1px solid #212121;
  color: white;
  display: inline-block;
  height: 30px;
  line-height: 1.2;
  margin: 0;
  min-width: 48px;
  outline: none;
  padding: 4px 20px 3px 0px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}

.cw-select:after {
  background: #1d1d1d;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  bottom: 0;
  color: white;
  content: "▼";
  font-size: 60%;
  line-height: 30px;
  padding: 0 6px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
<label class="cw-select">
 <select name="numberOfPlayers" form="numberOfPlayers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>
</label>

Safari

enter image description here

Другие

enter image description here

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

Вы можете использовать библиотеку select2 для стиля элемента select, если хотите. 

$('select').select2();
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

label.cw-select {
  display: inline-block;
  position: relative;
}

.cw-select select {
  background: #4d4d4d;
  border-radius: 0.3rem;
  border: 1px solid #212121;
  color: white;
  display: inline-block;
  height: 30px;
  line-height: 1.2;
  margin: 0;
  min-width: 48px;
  outline: none;
  padding: 4px 20px 3px 0px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}

.cw-select:after {
  background: #1d1d1d;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  bottom: 0;
  color: white;
  content: "▼";
  font-size: 60%;
  line-height: 30px;
  padding: 0 6px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<label class="cw-select">
 <select name="numberOfPlayers" form="numberOfPlayers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>
</label>
0 голосов
/ 12 февраля 2020

Я думаю, что левый отступ установлен на 0. Пожалуйста, проверьте этот код. 

.cw-select select {
    background: #4d4d4d;
    border-radius: 0.3rem;
    border: 1px solid #212121;
    color: white;
    display: inline-block;
    height: 30px;
    line-height: 1.2;
    margin: 0;
    min-width: 48px;
    outline: none;
    padding: 4px 20px 3px 10px; // instead of 4px 20px 3px 0;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}
...