Как изменить цвет у верхней и левой границы input?

Question

[Анастасия]

HTML

<div class="count">
            <button id="down" on:click={decreaseBtn}>-</button>
            <input
              id="numericUpDown"
              class="count-input"
              type="number"
              value={qty}
            />
            <button id="up" on:click={increaseBtn}>+</button>
</div>

CSS

.count {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.1rem;
  }

  .count-input {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    border-radius: 0.3rem;
    border-color: #cfd3d5;
    text-align: center;
    background-color: white;
    color: #6e7c84;
    font-size: 1.3rem;
    border-left-color: #cfd3d5 !important;
    border-top-color: #cfd3d5;
  }
  .count > input[type="number"]::-webkit-outer-spin-button,
  .count > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }

  .count > input[type="number"] {
    -moz-appearance: textfield;
  }

  .count button {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    margin: 0;
    border-radius: 0.3rem;
    background-color: #e9ebec;
    color: #707070;
    font-size: 1.7rem;
    line-height: 0;
    text-decoration: none;
  }

Comments

[Ankhena]

Вообще, вы уже всё написали.
И границы у вас уже покрашены.

Что не так?

[Анастасия]

У меня top and left border были не такого цвета как right and bottom.
Мне помогло
outline: 1px solid #cfd3d5;
border: none;

[Ankhena]

Анастасия,

У меня top and left border были не такого цвета как right and bottom.

Так вы им специально и задали другой цвет.
Если вам надо все одинаковые, то и пишите один цвет для всех 4 границ.

[Анастасия]

Ankhena, у них стоит такой же цвет как и у border-color #cfd3d5. И хорошо видно, что два границы другого цвета, если убрать
border-left-color: #cfd3d5 !important;
border-top-color: #cfd3d5;

[Ankhena]

Анастасия, у свойства border 3 параметра:
- толщина
- стиль
- цвет

Толщину и стиль вы не указали и браузер показывает эти значение по умолчанию. У инпутов он inset, а у кнопок outset. Причем ведут они себя в разных браузерах слегка по-разному.

Если вы хотите добиться какого-то конкретного результата, то разумнее напрямую сказать об этом браузеру (всё как
в жизни :) )

border: 2px solid red;
border: 3px dotted green;
border-left: 3px dotted yellow;
и т.д.