输入类型样式中的CSS最大长度

Question

如何在输入文本框中的css“（100 char.max）”中实现最大长度文本

Answer 1

Create a div container and place an input and a div element in it with display:inline-block. Then remove the borders and add the border to the container. Then it will look like a single input element

div{
  width:300px;
  border:1px solid #000;
}
div *{
  display:inline-block;
  border:0px;
}
div div{
  width:120px;
}

<div class="inp">
  <input id="ip" />
  <div class="chars">100 Chars Max.</div>
</div>

Answer 2

只是一个粗略的想法，但使用以下代码，您可以实现与上面发布的相似的布局。

＆＃13;

＆＃13;

label {
  display: inline-block;
  border-bottom: 1px solid black;
}

input {
  border: none;
  padding: 10px 0;
  outline: none;
}

span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

＆＃13;

<label>
  Description
  <div id="wrapper">
    <input type="text" placeholder="This is the description"/>
    <span>(100 char. max)</span>
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

There is no maxlenght property in CSS. Use HTML maxlenght instead:

<input type="text" name="myInput" maxlength="100"/>