Set the input field and the width of the button inside the input group in bootstrap 3

Question

I have a search box like this

code

<div class="input-group">
     <input name="search" value="" class="form-control" placeholder="Search" type="text" >
     <span class="input-group-btn">
        <button class="btn btn-default" type="submit"><span class="icon-search"></span></button>
     </span>
</div>

Here the search field is 100%.

I want to adjust the search field and the size of the search button to 80% and 20%

In fact, I want to make the search box

Any Idea?

Answer 1

Pure CSS.

#search-form .form-control,
#search-form .form-control:focus,
#search-form .form-control:hover {
  height: 50px;
  border-right: none;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
  box-shadow: none;
  left: 20px;
  margin-top: -1px;
}
/**/

#search-form button.btn.btn-orange,
#search-form button.btn.btn-orange:hover,
#search-form button.btn.btn-orange:focus {
  position: relative;
  height: 50px;
  width: 175px;
  color: white;
  background: none;
  font-size: 20px;
  text-align: left;
  margin-left: 15px;
  outline: none;
  box-shadow: none;
  border: none;
}
#search-form button.btn.btn-orange:before,
#search-form button.btn.btn-orange:after {
  position: absolute;
  content: '';
  top: -1px;
  height: 50px;
  width: 55%;
  background: #DC521F;
  z-index: -1;
}
#search-form button.btn.btn-orange:before {
  left: -15px;
  border-radius: 0;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
}
#search-form button.btn.btn-orange:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form id="search-form">
  <div class="container">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
                <button class="btn btn-orange" type="button">
                    <span class="glyphicon glyphicon-search">
                    </span>

      </button>
      </span>
    </div>
  </div>
</form>
<hr>

Run codeHide result

Answer 2

I made you a violin. You may need to adjust something, but you have an idea, right?

My advice. Start learning CSS. I have helped you now. But no one is going to do your work for you.

Fiddle link .

Code:

HTML

<div class="input-group">
     <input name="search" value="" class="form-control" placeholder="Search" type="text" >
     <span class="input-group-btn">
        <button class="btn btn-default" type="submit"></button>
     </span>
</div>

Run codeHide result

CSS

.input-group-btn img{
    width: 16px;
}
.form-control{
    padding: 20px;
    border-radius:20px;
}
.btn{
    background: url('http://s17.postimg.org/m8q2d6r9n/o_P5_Lw.png') no-repeat;
    height: 42px;
    width: 115px;
    border: none;
}

Run codeHide result

Answer 3

, CSS.

HTML:

<div class="input-group">
     <input name="search" value="" class="form-control" placeholder="Search" type="text" >
     <span class="input-group-btn">
       <span id="triangle-down"></span> <!-- <<<<< ADD THIS TO YOUR HTML -->
        <button class="btn btn-default" type="submit"><span class="icon-search"></span></button>
     </span>
</div>

CSS :

.input-group{
  width:60%;
  margin:20px;
}
.form-control{
  border-radius:20px;
  width:80%;
}
.input-group-btn{
  width:20%;
}
.btn-default{
  border-radius:20px;
  background-color:#DC521F;
  color:#fff;
  width:100%;
  position:relative;
  z-index:0;
}
#triangle-down {
    width: 0;
    height: 0;
  display:inline-block;
  position:absolute;
  left:-20px;
  top:1px;
  z-index:100;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 32px solid #DC521F;
}

A : CODEPEN

------- -------

CSS:

.hover{
  border-top: 32px solid #E6E6E6 !important;
}

JS-:

$( ".input-group-btn" ).hover(
  function() {
    $( '.triangle-down').addClass( "hover" );
  }, function() {
    $( '.triangle-down' ).removeClass( "hover" );
  }
);

HOVER , .

A : CODEPEN