I am trying to achieve this:
I just want to show a button inside an input element just like the above image
This question is related to
html
css
html-input
This can be achieved using inline-block JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
<a href="#" class="button">Button</a>
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>
.flexContainer {_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
.inputField {_x000D_
flex: 1;_x000D_
}
_x000D_
<div class="flexContainer">_x000D_
<input type="password" class="inputField">_x000D_
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>_x000D_
</div>
_x000D_
The best way to do this now (2019) is with a flexbox.
Run the snippet below to see what you get.
form {_x000D_
/* This bit sets up the horizontal layout */_x000D_
display:flex;_x000D_
flex-direction:row;_x000D_
_x000D_
/* This bit draws the box around it */_x000D_
border:1px solid grey;_x000D_
_x000D_
/* I've used padding so you can see the edges of the elements. */_x000D_
padding:2px;_x000D_
}_x000D_
_x000D_
input {_x000D_
/* Tell the input to use all the available space */_x000D_
flex-grow:2;_x000D_
/* And hide the input's outline, so the form looks like the outline */_x000D_
border:none;_x000D_
}_x000D_
_x000D_
input:focus {_x000D_
/* removing the input focus blue box. Put this on the form if you like. */_x000D_
outline: none;_x000D_
}_x000D_
_x000D_
button {_x000D_
/* Just a little styling to make it pretty */_x000D_
border:1px solid blue;_x000D_
background:blue;_x000D_
color:white;_x000D_
}
_x000D_
<form>_x000D_
<input />_x000D_
<button>Go</button>_x000D_
</form>
_x000D_
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
You can use CSS background:url(ur_img.png)
for insert image inside input box
but for create click event you need to merge your arrow image and input box .
Source: Stackoverflow.com