css - CSS-在WordPress站点中带有内部按钮的输入字段

我在CSS和设计网站方面不是很好。

我没有摆脱它。

我想添加一个带有内部按钮的输入字段以进行提交。所有这些都在wordpress网站内作为简码。

它看起来应该像这样：



的HTML

.event_form_autocomplete {
  width: 90%;
  padding: 15px;
  border: 1px solid #002652;
  color: #002652;
  font-size: 15px;
}

.event_form_submit {
  margin-left: -59px;
  padding: 14px;
  width: 50px;
  background: #002652;
  color: white;
  border: 0;
}
.event_form_arrow {
  color: white;
  position: absolute;
  margin-top: 17px;
  margin-left: -23px;
}

<input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required>
<input class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i>
   

http://jsfiddle.net/s5GVh/2953/

但是看起来像这样

Mozilla


苹果浏览器


歌剧


铬



全部具有最新版本。

最佳答案

试试这个代码

的HTML

<div class="input-wrapper">
<input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required>
<button class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i></button>
</div>

的CSS

.input-wrapper{
  position: relative;
  border: 1px solid #002652;
}
.event_form_autocomplete {
    width: 100%;
    padding: 15px;
    color: #002652;
    font-size: 15px;
    border-width: 0;
        box-sizing: border-box;
}

.event_form_submit {
    margin: 0;
    padding: 14px;
    width: 50px;
    background: #002652;
    color: white;
    border: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    height: 39px;
}
.event_form_arrow {
    color: white;
    position: absolute;
    margin-top: 17px;
    margin-left: -23px;
}