HTML5 / CSS input field with image as submit-button inside the input field - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input submit

Description

HTML5 / CSS input field with image as submit-button inside the input field

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Eric</title> 
  <style>

#Search {<!--   w w w  .  j a  v  a2 s .  c  om-->
   position: relative;
   display: inline-block;
}
input[type=text] {
   position: relative;
   width: 200px;
   height: 36px;
   box-sizing: border-box;
   border: 2px solid #4d7fc3;
   border-radius: 4px;
   font-size: 16px;
   background-color: white;
   padding: 2px 40px 2px 10px;
}
input[type=submit] {
   position:absolute;
   width: 30px;
   height: 100%;
   top: 0px;
   right: 0px;
   border: none;
   color: white;
   background: url('https://www.java2s.com/style/demo/Safari.png') #4d7fc3 center center no-repeat;
   display: block;
   cursor: pointer;
}


      </style> 
 </head> 
 <body translate="no"> 
  <p>Input with icon:</p> 
  <form> 
   <div id="Search"> 
    <input type="text" name="search" placeholder="Search.."> 
    <input type="submit" value=""> 
   </div> 
  </form>  
 </body>
</html>

Related Tutorials