Add content to text input

HTML & CSS
3

As mentioned in your other thread, the :before pseudo-class doesn’t work with input elements. If you want to show an X (based on the :invalid pseudo-class, I’d suspect), this would have to be a sibling element. However, you could lay that element over the input by absolutely positioning it like

CSS

.container {
    position: relative;
}

.focus {
    border: 1px solid red;
    outline: none;
    padding-left: 20px;
}

.x {
    display: none;
    position: absolute;
    top: 1px;
    left: 2px;
    font-family: "monospace";
    color: red;
}

.focus:invalid ~ .x {
    display: block;
}

HTML

<div class="container">
    <input type="email" size="61" class="focus">
    <div class="x">X</div>
</div>

x-post

1 Like