junep
junep

Reputation: 2164

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

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

enter image description here

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?

Upvotes: 0

Views: 53

Answers (1)

Icewine
Icewine

Reputation: 1851

.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.

Upvotes: 2

Related Questions