Как убрать отступ у текста в select?

Question

[qwerty12ss]

Приветствую, подскажите пожалуйста, как убрать несуществующий отступ у select, нужно, что бы текст прижался к левому краю, без разницы каким способом js или css.

<select
							 name="nationality" id="nationality" class="signup__select signup__select--nationality">
								<option value="American" selected="selected">American</option>
								<option value="Russian">Russian</option>
								<option value="Briton">Briton</option>
								<option value="Chinese">Chinese</option>
							</select></li>

.signup__select {
  font-family: "worksans", "Arial", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  color: #111;
  height: 23px;
  border: none;
  border-bottom: 1px solid #f2f2f2;
  padding: 0 0 6.33px 0;
}

Картинку или ссылку на картинку почему-то не получается вставить, htt ps://ibb(точка)co/x2gFw66

Comments

[Дмитрий Шмаков]

spoiler

Картинка из ссылки автора.
Где именно ненужный отступ на картинке?

Answer 1

[Oleg]

Добавьте к стилям select

appearance: none;
-webkit-appearance: none;

Comments

[qwerty12ss]

Огромное спасибо)

[qwerty12ss]

Хотя теперь убралась стрелочка

[Oleg]

Стрелочку можно добавить через css.
По-другому никак. Только если придумывать обертки или, как уже советовали, использовать кастомные селекты.

[qwerty12ss]

Oleg, Я чтото уже совсем туплю, через css с помощью псевдоэлементов? select, почему-то не видит этот псевдоэлемент

[Oleg]

qwerty12ss, Нет, не псевдоэлементы, а через фоновое изображение.

Немного некрасивое решение, но должно натолкнуть в нужном направлении