So vergrößern Sie die Breite der Suchleiste in der Kopfzeile

Question

Ich muss die Breite der Suchleiste erhöhen und die Grenze unsichtbar machen, während sie beweglich bleibt. Etwas wie:

http://oneclass.com/#!/notes 

HTML

<a class="navbar-brand page-scroll" href="#page-top">dss</a> 
</div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control ipt" placeholder="Search" name="q"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
         </div> 
        </div> 
       </form> 
      </li> 
      <li> 
       <a href="study_material.php">Study Material</a> 
      </li> 
      <li> 
       <a href="about.php">About us</a> 
      </li> 
      <li> 
       <a href="">Blog</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Sie können es mit CSS tun ... nur etwas Art der Elementklasse hinzufügen, die Sie bearbeiten möchten ...

I Ich nehme an, Sie können etwas wie folgt verwenden:

.ipt { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0px; 
    border-bottom: 1px solid #ccc; 
    height: 50px; 
    font-size: 25px; 
    line-height: 45px; 
} 

DEMO

Answer 2

Sie können ein paar CSS zum Eingabe "Text" -Tag hinzufügen (was mit einer IPT-Klasse hier).

.ipt { 
    border:none; //make the border invisible 
    width:75%;  //set width to % instead of pixel to make it responsible. 
    height:50px; 
    font-size:22px; //control the text area's height of the text-input tag. 
} 

können Sie eine einfache Demo hier überprüfen. http://codepen.io/fukurouzhong/pen/JKdLVd