CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin
Nithin

Reputation: 1477

How to merge submit button inside input tag?

I have an input tag with a background image

HTML:

<form><input placeholder="Input" id="exampleInput" type="text"></form>

CSS:

#exampleInput{
    background: url(graph.ico) no-repeat scroll 95% 10px;
}

I want to use that background image itself as a submit button. How do i do that?

EDIT

The present look is like this

https://screenshots.firefox.com/3MMfNTbHxKVuFw1c/localhost

I do not want to alter the look, but i wanna add some functionality to the background image inside the input tag so that it can be clickable.

Upvotes: 1

Views: 1002

Answers (2)

Matthew Moran
Matthew Moran

Reputation: 1497

Updated answer based on your edit:

You could do something like this. You'll have to mess around with your specific dimensions. I wrapped the input and image in a span container element and set position: relative. From there, I set the image element as position: absolute; and then positioned it accordingly, relative to the span element.

#input-container {
  position: relative;
}

#myImage {
  position: absolute;
  right: 12px;
  top: 50%;
  bottom: 50%;
  margin: auto;
}

#myImage:hover {
  cursor: pointer;
}
<span id="input-container">
  <input type="text">
  <img id="myImage" src="http://via.placeholder.com/15x15" alt="">
</span>

Original Answer

You could use an image element

$('#myImage').on('click', (e) => {
  $('#myForm').submit();
});

$("#myForm").on("submit", function(e) {
  e.preventDefault();
  console.log('form was submitted');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input placeholder="Input" id="exampleInput" type="text">
  <img id="myImage" src="graph.ico" alt="">
</form>

Upvotes: 2

Nelh Amstrong
Nelh Amstrong

Reputation: 51

i don't know if i get your question right, but i think you can try this way

.btn-image {
    background: url("https://www.adiumxtras.com/images/thumbs/anonymous_1_39536_8261_thumb.png") no-repeat;
    background-size: cover;
    width:50px;
    height: 50px;
    border-radius: none;
    border:none;
    color: transparent;
}
.search-field {
    padding: 20px;
    background-color: #252528;
    color: #fff;
}
<div>
   <input type="text" placeholder="search..."
   class="search-field">
    <input type="submit" class="btn-image">
 </div>

Upvotes: 0

Related Questions