how can I insert text on image type input by using CSS

Question

I'm trying to insert text on input image like below image

i.e. I have

<input id="faq" type=image" src="img_path"/>

and I want to put text on it using CSS. (also I should do handle the position of text)

Is there any way to do it?

Icewine · Accepted Answer · 2017-05-16 01:29:44Z

2

.container {
  position: relative; 
}

.text {
  position: absolute; 
  font-size: 12px;
  left: 10px;
  top: calc(50% - 9px); 
  color: red;
}

<div class="container">
  	<div class="text">FAQ</div>
  	<input class="imgInput" id="faq" type="image" src="https://i.sstatic.net/I5t4o.gif">
</div>

This is one way to do it. This may not be exactly what you are looking for but this is one way to do it.

answered May 16, 2017 at 1:29

Icewine

1,8511 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1