CSS最大长度

在CSS中如何才能实现最大长度的文本 “（100字符最大）”，在文本框中输入 CSS最大长度

2017-06-15 dcheepurapalli

你能分享你试过的代码，所以我们可以帮助你修复它？ –

最好的方法是将输入封装在包装器中，并在所述包装器的顶部放置一个伪元素“:: after”。将包装器设置为'position：relative;'并根据需要绝对定位伪元素。你必须使用包装器，因为你不能在''上放置伪元素，这样你仍然可以相对于输入进行定位。 – SamHH

把它放在一个div或相对于输入的东西 –

只是一个粗略的想法，但下面的代码，你可以实现类似的布局，你上面贴了一个。

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; 
 
}

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

来源

2017-06-15 11:03:24 SvenL

-3

HTML代码

<div class="input-field"> 
    <input type="text" name="myInput" maxlength="100"/> 
</div>

CSS样式

.input-field { 
    position: relative; 
    display: inline-block; 
} 
.input-field:after { 
    position: absolute; 
    top: 0; 
    right: 5px; 
    content:"text"; 
    color: #ccc; 
}

https://jsfiddle.net/Lszyb6m9/

在这里，你可以看到它的工作

来源

2017-06-15 09:19:37 varto

他想塑造100个字符。最大'文本''。 –

-3

CSS中没有maxlenght属性。使用HTML maxlenght代替：

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

来源

2017-06-15 09:25:06

他想塑造100个字符。最大'文本''。 –

创建一个div容器，并把输入和一个div元素在它display:inline-block。然后删除边框并将边框添加到容器。然后，它会看起来像一个单独的输入元素

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>

来源

2017-06-15 09:54:39

CSS最大长度

回答

相关问题