2

How can achieve max length text in css "(100 char. max)" in the input text boxenter image description here

dcheepurapalli
  • 75
  • 2
  • 5
  • Could you share the code you tried, so we can help you fixing it ? – j-printemps Jun 15 '17 at 09:20
  • 2
    Best way would be to wrap the input in a wrapper, and put a pseudo-element `::after` on top of said wrapper. Set the wrapper to `position: relative;` and absolutely position the pseudo-element as desired. You have to use a wrapper as you can't place pseudo-elements on ``s, and this way you can still position relative to the input. – Sam A. Horvath-Hunt Jun 15 '17 at 09:28
  • put it in a div or something with relative to the input – Sagar V Jun 15 '17 at 09:45
  • 1
    Why is it marked as duplicate ? – Zooly Jun 15 '17 at 13:20

3 Answers3

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>
Sagar V
  • 12,158
  • 7
  • 41
  • 68
1

Just a rough idea but with the following code you could achieve a similar layout to the one you have posted above.

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>
SvenL
  • 1,904
  • 8
  • 10
-2

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

<input type="text" name="myInput" maxlength="100"/>
MUHAMMAD Siyab
  • 436
  • 1
  • 9
  • 20