CODEWITHSUNDEEP
htmlimagecssbuttoninput
user3908497
user3908497

Reputation: 13

Input with a href/button img inside

I understand how to use img inside an input, but I don't know how to make the img a button or a href. This is what I have so far:

input {
border: none;
padding: 10px;
width: 128px;
border-radius: 5px;

background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png') no-repeat;
background-size: 35px 35px;
border:0;
padding-left:30px;
background-color: rgb(18,41,73);
border-color: rgb(18,41,73);
font-size: 12px;
}
<input type="text" placeholder="my text"></input>

How can I make the img arrow as clicked img?

Upvotes: 0

Views: 156

Answers (1)

Praveen Kavuri
Praveen Kavuri

Reputation: 355

You can do this by using relative and absolute positioning elements as shown in the below snippet. I used button in this snippet, you change it to link and use href following the same procedure.

input {
border: none;
padding: 10px;
width: 128px;
border-radius: 5px;
border:0;
padding-left:30px;
background-color: rgb(18,41,73);
border-color: rgb(18,41,73);
font-size: 12px;
}
#in_image{
  position:absolute;
  border:none;
  background:none;
  outline:none;
  }
<div style="position:relative">
 <button id="in_image" onclick="alert('I am a button')"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png" width="35" height="35" /></button>
<input type="text" placeholder="my text" />
</div>

Upvotes: 2

Related Questions