Twitter bootstrap input prepend full width - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

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

Description

Twitter bootstrap input prepend full width

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, consecte</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css"> 
  <style id="compiled-css" type="text/css">
.box-shadow {<!--from   w ww .  j a va2  s .  c  om-->
   -webkit-box-shadow:4px 4px 4px 4px Chartreuse;
   box-shadow:4px 4px 4px 4px yellow;
}

.input-prepend, .input-prepend.input-fullwidth .input-wrapper {
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
}

.input-prepend.input-fullwidth {
   position:relative;
}

.input-prepend.input-fullwidth .add-on {
   width:41px;
}

.input-prepend.input-fullwidth .input-wrapper {
   position:absolute;
   display:block;
   left:52px;
   right:0;
   top:0;
   bottom:0;
}

.input-prepend.input-fullwidth .input-wrapper input {
   width:100%;
   height:100%;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

body {
   padding:41px;
}

.input-prepend {
   background:hsl(61, 100%, 91%);
}
</style> 
 </head> 
 <body> 
  <div class="input-prepend box-shadow input-fullwidth"> 
   <span class="add-on">Lorem</span> 
   <div class="input-wrapper"> 
    <input type="text" name="#" value="#hello" placeholder="Edit project"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials