Image inside input text - html

Question

I have this desing and I´ll like to program it but I dont find the way.
Does anyone know how to make it?
How can I put that '+' inside?
Here is the piece of code:-
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 30%;
height: 20px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
ESTADO <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
</div>

Answer 1

You can use the position:absolute, you can literally play with css to get the required output there are many number of way for what u have asked here is something which i have made
Example
.input-field{
position: relative;
width: 250px;
}
.input-field input{
border:none;
background-color: #ccc;
border-radius: 10rem;
width:100%;
height: 25px;
}
.icon{
position: absolute;
top:0;
right:0;
color: white;
font-weight: 600;
font-size: x-large;
background: black;
padding-right: 10px;
padding-left: 5px;
border-top-right-radius: 10rem;
border-bottom-right-radius: 10rem;
}
<div class="input-field">
<input type="text" >
<div class="icon">+</div>
</div>

Answer 2

Try this.
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 190px;
height: 20px;
border:1px solid #ccc;
}
.input-wrap {
position: relative;
display: inline-block;
}
.input-wrap .icon {
background: #616261;
border-radius: 0 50px 50px 0;
bottom: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 29px;
color: #fff;
font-size: 19px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
ESTADO
<hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
</div>

Answer 3

you can add pseudo element to the parent div
http://jsfiddle.net/w9ew0nrw/7/
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
</div>
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
height: 30px;
border:0;
}
.input-group {
position:relative;
width:200px;
}
.input-group:after {
position:absolute;
top;0;
right:0;
width:30px;
height:30px;
background-color:#333;
color:#fff;
content:"+";
border-radius:0 100% 100% 0;
text-align:center;
line-height:30px;
font-size:20px;
}

Answer 4

You can try this code:
also if you want button instead of + label.
1st textbox is for label
2nd is for button
.busqueda_input {
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 100%;
height: 40px;
border: none;
outline: none;
display: inline-block;
text-indent: 15px;
}
.input-div , .input-div-2 {
width: 50%;
position: relative;
margin-bottom:20px;
}
.input-div:after , .input-div-2 button {
content: "+";
position: absolute;
right: 0px;
top: 0;
background: #616261;
bottom: 0;
border-radius: 50px;
width: 50px;
text-align: center;
font-size: 35px;
color: #fff;
border:none;
outline:none;
}
button{
cursor: pointer;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-div">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul"> <div class="input-div-2"><input type="text" class="busqueda_input" name="">
<button>+</button>
</div>
</div>