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

回答

相關問題