<button> 在 <input> 字段中？ [复制]答案

【问题标题】：<button> inside <input> field? [duplicate]<button> 在 <input> 字段中？ [复制]
【发布时间】：2018-04-01 11:28:13
【问题描述】：

我正在尝试获取<button>，在这种情况下，它是'loop mee'，在<input> 字段内带有渐变，placeholder: lucasdebelder@imd.com;'

我怎样才能做到这一点？

input {
    background: #FFFFFF;
    border-radius: 55px;
    border: none;
}

<input type="email" placeholder="lucasdebelder@imd.com" required="required">

<button>Sign up</button>

【问题讨论】：

标签： html css button css-position

【解决方案1】：

body{
background:#9E9E9E;

}
div{
margin:10% 10% 10% 20%;
}
input[type="email"] {
    width: 300px;
    height: 40px;
    border-radius:20px;
    background:#FFFFFF;
    outline:none;
    border:none;
    }

.button{
    margin-left:-21.5%;
    height: 45px;
    width: 90px;
    border-radius:20px;
    background: -webkit-linear-gradient(#FF5252, #FF4081); /* For Safari 5.1 to 6.0*/
    background: -o-linear-gradient(#FF5252, #FF4081); /* For Opera 11.1 to 12.0*/    background: -moz-linear-gradient(#FF5252, #FF4081); /* For Firefox 3.6 to 15*/
    background: linear-gradient(#FF5252, #FF4081); /*Standard syntax*/             border:none;
}
.bold{
  color: #FFFFFF;
  font-size:13px;
  font-weight:bold;
}
/*Place holder color*/
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #757575;
  font-size:14px;
  font-weight:bold;
  padding:5px;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #757575;
  font-size:14px;
  font-weight:bold;
    padding:5px;

  }
:-ms-input-placeholder { /* IE 10+ */
 color: #757575;
  font-size:14px;
  font-weight:bold;
  padding:5px;

  }
:-moz-placeholder { /* Firefox 18- */
 color: #757575;
  font-size:14px;
  font-weight:bold;
  padding:5px;
  }

<div>
<input type="email" placeholder="lucasdebelder@imd.com" required="required">
<button class="button"><p class="bold">loop mee<p></button>
</div>

【讨论】：