输入文本内的图像

Question

我有这个设计，我喜欢编程，但我没有找到方法。 有谁知道如何制作它？

我怎样才能把'+'放进去？

这是一段代码： -

.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

你可以使用position:absolute，你可以逐字地用css来获得所需的输出有许多方法你所问的这里是我做的东西 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

您可以使用label及其伪元素。标签的使用非常重要，因为点击 + 会触发对输入的关注。

label {
  position: relative;
}

input {
  border: none;
  border-radius: 30px;
  background: #ccc;
  padding: 20px;
  width: 250px;
}

label:after {
  content: "+";
  position: absolute;
  right: 0;
  border-radius: 0 30px 30px 0;
  background: #000;
  color: #fff;
  padding: 10px;
  font-size: 30px;
  font-weight: bold;
}

<label><input type="text" /></label>

Answer 3

试试这个。

.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 4

您可以将伪元素添加到父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 5

您可以尝试以下代码： 如果你想要按钮而不是+标签。

第一个文本框用于标签

第二个是按钮

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;