Reputation: 3612
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.
I found about clip-path: polygon in css but it only accepts four coordinates.
Thanks in advance!
Upvotes: 0
Views: 2957
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