Имитация выравнивания текста по центру для выбранной опции в выборе с помощью простого javascript или jQuery - PullRequest
Новая
       6

Имитация выравнивания текста по центру для выбранной опции в выборе с помощью простого javascript или jQuery

1 голос
/ 08 мая 2020

Мне интересно, можно ли «смоделировать» выравнивание текста: center; для выбора ( с кроссбраузерностью ) с помощью родительского контейнера и простого javascript (или jQuery) скрипта. Я хотел бы сделать это без установки библиотеки js, отсюда и желание простого скрипта.

Цель: сделать текст центрированным относительно внешнего (пунктирного) контейнера, когда выбран любой из вариантов, независимо от ширины экрана. Я хочу это только для выбранного значения (т.е. эффективного заполнителя), меня не беспокоит формат раскрывающихся списков опций.

Это требует ответа javascript - не может быть сделано только в CSS

https://jsfiddle.net/zs0or8et/1/

<div>
  <select>
    <option>Longtextoption</option>
    <option>Short</option>
  </select>
</div>

<style>

div {
  width:100%;
  outline: 1px dotted;
}

select {
  margin-left:50%;
  outline:none;
  border:none;
  background:none; 
  -webkit-appearance: none;
  -moz-appearance: none;
/* BELOW TRANSLATION NEEDS TO BE MADE DYNAMIC DEPENDING ON WIDTH OF SELECTED OPTION */
  transform: translate(-50px);
}

</style>

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

Как вы относитесь к использованию другого div для хранения вашего значения?

HTML

<div class="wrapper">
  <select onchange="change(this)">
    <option value="-1">Please Select</option>
    <option value="0">Scotty Auten</option>
    <option value="1">Adriane Gaillard</option>
    <option value="2">Tequila Goodnough</option>
  </select>
  <div id="value" aria-hidden="true" tabindex="-1">Please Select</div>
</div>

CSS

.wrapper {
  width: 100%;
  position: relative;
}
#value {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  pointer-events: none;
}
select {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #999;
  color: white;
  text-color: white;
  margin: 0;
}
option {
  color: black;
  text-color: black;
}

JS

function change(item) {
  var name = item.options[item.selectedIndex].text
  document.getElementById("value").innerHTML = name;
}

Мы используем aria hiding, чтобы скрыть значение div от программы чтения с экрана.

0 голосов
/ 08 мая 2020

Этого можно достичь, добавив свойство text-align к родительскому div, как показано ниже, а также ваш select класс стиля 

div {
  width:100%;
  outline: 1px dotted;
}

select {
  margin-left:50%;
  outline:none;
  border:none;
  background:none; 
  -webkit-appearance: none;
  -moz-appearance: none;
/* BELOW TRANSLATION NEEDS TO BE MADE DYNAMIC DEPENDING ON WIDTH OF SELECTED OPTION */
  transform: translate(-50px);
  /* Align content styles below */
  text-align: -webkit-center;
  text-align-last: -webkit-center;

}
<div>
  <select>
    <option>Longtextoption</option>
    <option>Short</option>
  </select>
</div>
...