Aligning image next to textbox - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Alignment

Description

Aligning image next to textbox

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#searchWrapper {<!--from  ww  w.j  ava  2  s.  c  o m-->
   border-bottom:2px solid Chartreuse;
   height:61px;
   background:-webkit-linear-gradient(bottom, yellow, blue);
   background:linear-gradient( bottom, pink, WhiteSmoke);
   background:-moz-linear-gradient( bottom, OrangeRed, grey);
   font-size:15px;
   font-family:"Frutiger56Roman", "Helvetica Neue", Helvetica, Arial,sans-serif;
   color:BlueViolet;
   width:100%;
   box-shadow:0 5px 3px -3px Chartreuse;
   float:right;
   background:linear-gradient(bottom, yellow, blue);
   background:-moz-linear-gradient(bottom, pink, WhiteSmoke);
}

#image {
   position:relative;
   top:7px;
}
</style> 
 </head> 
 <body> 
  <div id="searchWrapper"> 
   <input id="searchBox" style="width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;" type="text" placeholder="Search"> 
   <img src="https://www.java2s.com/style/demo/Firefox.png" id="image"> 
  </div>  
 </body>
</html>

Related Tutorials