CODEWITHSUNDEEP
htmlcsstextbox
sir-haver
sir-haver

Reputation: 3612

Is it possible to customize the shape of a text box?

I was wondering if it's possible to change the shape of a text box, so it would be a rectangle but with the beginning of it 'taken out' ? I attached an example image. enter image description here

I found about clip-path: polygon in css but it only accepts four coordinates.

Thanks in advance!

Upvotes: 0

Views: 2957

Answers (1)

Chaska
Chaska

Reputation: 3205

Check below codes see if this is what you want:

.field {
  position: relative;
  margin-bottom: 20px;
}
.field label {
  position: absolute;
  min-width: 100px;
  border: 1px solid;
  border-top-color: #fff;
  border-left-color: #fff;
}
.field input[type="text"] {
  padding: 10px 10px 10px 110px;
  border: 1px solid;
  outline: none;
}
<div class="field">
  <label for="status">Status</label>
  <input type="text" id="status">
</div>
<div class="field">
  <label for="givenname">Given Name</label>
  <input type="text" id="givenname">
</div>
<div class="field">
  <label for="surname">SurName</label>
  <input type="text" id="surname">
</div>

Upvotes: 2

Related Questions