Как сделать пунктирное подчеркивание у select?

Question

[rinatoptimus]

Есть простой селект, надо, чтоб у него было подчеркивание пунктиром по длине слова. Пробовал регулировать ширину и тд, но то длина подчеркивания не подходит к выбранному селекту, то вообще не работает:

<div class="styled-select">
  <select>
    <option>Казань</option>
    <option>Москва</option>
    <option>Санкт-Петербург</option>
    <option>Калуга</option>
    <option>Самара</option>
    <option>Тверь</option>
  </select>
</div>

.styled-select select {
  background: transparent;
  width: 268px;
  margin-top: 9px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  text-decoration: underline;
  text-decoration-style: dashed;
  color: #000;
  outline: none;
}
.styled-select select:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom: 1px dashed #000;
}

Пример:
codepen.io/rinatoptimus/pen/KgLGdk

Answer 1

[Максим Тимофеев]

.styled-select select {
  border-bottom: #000 1px dashed;
}

или

.styled-select select {
  background: transparent;
  position:relative;
  width: 268px;
  margin-top: 9px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  color: #000;
  outline: none;
}
.styled-select::after {
  content : " ";
  display:block;
  height  : 1px;
  width: 268px;
  border-bottom: 1px dashed #000;
}

Comments

[rinatoptimus]

Нет, нужно, чтобы пунктир совпадал с длиной слова.

Answer 2

[iBird Rose]

ваще без проблем xD https://jsfiddle.net/iBird/s86d5ky3/

Comments

[rinatoptimus]

Не охота Бутстрэп тянуть для этого

[iBird Rose]

rinatoptimus: ну значит мучайся дальше)

[iBird Rose]

rinatoptimus: этот скрипт селекта кстати и без бустрапа работает. просто придется самому его стилизовать

[Андрей Хохлов]

читерство :( но иначе никак