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

Question

我不太擅长 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/

但是在

中看起来是这样的

火狐

Safari

歌剧

Chrome

全部为最新版本。

Answer 1

试试这段代码

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