Рамка ввода имеет полусерый цвет

Question

В Chrome у меня есть простой ввод с помощью этого CSS:

.circleInput{
  border-width: 2px;
  border-color: rgb(230,230,230);
  outline-width: 0;
  border-radius: 3.5vh;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.0vw;
  background-color: white;
  -webkit-appearance: none;
}

На этой фотографии вы можете увидеть, что с ним происходит:

введите описание изображения здесь

Answer 1

Просто установите border-style: solid!

.wrapper {
  width: 200px;
  height: 25px;
}

.circleInput {
  border-width: 2px;
  border-color: rgb(230,230,230);
  outline-width: 0;
  border-style: solid;
  border-radius: 3.5vh;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.0vw;
  background-color: white;
  -webkit-appearance: none;
}

<div class="wrapper">
  <input class="circleInput" type="text" />
</div>