метка внутри ввода с правой стороны длиной символов, например 23/100 - PullRequest
Новая
       23

метка внутри ввода с правой стороны длиной символов, например 23/100

0 голосов
/ 13 апреля 2020

Я пытаюсь сделать систему чата, и мне нужно сделать ввод с меткой, где показано, сколько символов набрано. Моя проблема в том, что я пробовал много css свойств и смотрел много вопросов, но ничего не нашел. Не могли бы вы мне помочь?

Текущий html: 

<form class="msger-inputarea">
    <label style="position: absolute; float: right; alignment: right; right: 4.5rem; background-color: red" for="input">123</label>
    <input type="text" style="outline: 0; background-color: blue" oninput="checkForLength()" id="input" maxlength="100" class="msger-input" data-placement="top" data-toggle="popover" data-content="Sorry, but max length of text is 100 characters..." title="Max characters" placeholder="Enter your message...">
    <button type="submit" class="msger-send-btn">
        <i class="far fa-arrow-circle-right"></i>
    </button>
</form>

Текущий css: 

.msger-inputarea {
   display: flex;
   padding: 10px;
   border-top: var(--border);
   background: #eee;
}

.msger-inputarea * {
   padding: 10px;
   border: none;
   border-radius: 3px;
   font-size: 1em;
}

.msger-input {
   flex: 1;
   background: #ddd;
}

.msger-send-btn {
    margin-left: 10px;
    background: rgba(0, 196, 65, 100);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
}

Текущее состояние в порядке, но когда я изменяю размер браузера поплавок перемещается куда-то еще, чем вход, из-за свойства right: 4.5rem.

...