Таким образом, у меня есть ввод числа, сделанный с помощью styled components, где рядом с ним находится метка для формы span:
и css для этого:
input {
display: block;
outline: none;
font-size: 16px;
font-weight: 500;
-webkit-appearance: none;
border: 1px solid #e6e6e6;
border-radius: 5px;
background-color: #fff;
border: ${(props) => (props.option === true ? '0px' : '')};
line-height: 19px;
z-index: 1;
height: 40px;
width: ${(props) => (props.numberInputWidth)};
padding: 0 8px;
margin-left: 5px;
margin-top: 20px;
transition: border-color 0.3s ease-in-out;
white-space: nowrap;
&:focus {
border-color: ${COLORS.LIGHTGREEN};
transition: border-color 0.3s ease-in-out;
${({ error }) => error && `
border-color: ${COLORS.ERROR};
`}
}
}
и метка:
.label {
white-space: nowrap;
position: absolute;
display: inline-block;
font-size: 16px;
font-weight: 500;
left: 20px;
bottom: 7px;
user-select: none;
pointer-events: none;
z-index: 0;
height: 40%;
}
и невидимое расстояние внутри метки:
.invis {
opacity: 0;
}
Какиевсе работает.Однако, когда пользователь вводит очень длинное целое число, заполнитель будет вытекать из контейнера, что, как я полагаю, связано с тем, что он абсолютно расположен:
Ради потомков, вот контейнер, содержащий элементы:
.container {
position: relative;
margin-left: 10px;
text-align: left;
display: inline-block;
vertical-align: top;
}
Можно ли сделать так, чтобы метка / заполнитель не переполнялась над контейнером, а переполнялась внутри контейнера и позади / под контейнером?Вроде как:
, где знак процента немного обрезан.
Мой HTML выглядит следующим образом:
<div class="container">
<input type="number" />
<span class="label"><span class="invis">**invisible value for spacing here**</span> seats</span>
</div>
Я попробовал несколько вещей в контейнере, и я уверен, что это виновник в том, чтобы заставить это работать.Любая помощь очень, очень ценится.Спасибо!