`:after` - psudo class not working with `input` element

Question

I am trying to add a close button on each of input element by using psudo class after. but not working. same works with button element.

here i my code :

.textBox {
    padding: 15px ;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.textBox:after {
    content: "";
    width: 15px;
    height: 15px;
    background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
    border:1px solid red;
    display: inline-block;
    border:1px solid red;
}

<input type="text" class="textBox" value="mytext" name="" id="">

<button class="textBox">Click me</button>

score 1 · Answer 1 · answered Jul 04 '18 at 08:10

1

Use wrap div and set there textBox class instead of in input

.textBox {
    padding: 15px ;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.textBox:after {
    content: "";
    width: 15px;
    height: 15px;
    background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
    border:1px solid red;
    display: inline-block;
    border:1px solid red;
}

<div class="textBox">
<input type="text"  value="mytext" name="" id="">
</div>
<button class="textBox">Click me</button>

answered Jul 04 '18 at 08:10

לבני מלכה

15,403
2
20
41

I just look to have avoiding additional element in the form element. – user2024080 Jul 04 '18 at 08:18
but it must if you want pseudo to input – לבני מלכה Jul 04 '18 at 08:20

`:after` - psudo class not working with `input` element

1 Answers1