Как изменить цвет у верхней и левой границы input
Html
.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;
}
<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>
Ответы (1 шт):
Автор решения: Хмельни́цький
→ Ссылка
Поменяйте значение ⠀border-left-color и border-top-color ⠀у класса count-input
.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: red; /********* Левая граница **********/
border-top-color: blue; /******** Верхняя граница *********/
}
.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;
}
<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>