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/
但它看起来像这样
铬合金
全部使用最新版本。
解决方案
试试这个代码
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;
}
推荐阅读
- php - htaccess 问题。一条规则有效,另一条无效
- html - Jquery 'click' 功能仅适用于“if”语句,不适用于“else if”
- linux - Linux NetEm-测量的数据包损坏方式太低
- javascript - Highcharts 树状图
- javascript - 生成器返回在 for-await-of 循环中不起作用
- php - 如何获取 next_post() 链接以使用手动排序而不是 Wordpress 中的默认页面 ID 排序?
- typescript - 如何使用 Typescript 对可能的空数组进行建模
- python - 捆绑提取具有地牢的每个链接将它们分开并将每个链接添加到列表中并删除重复项
- rest-assured-jsonpath - Jayway JSONPath 元素检索
- sql - 在自定义类型中过滤 DATE?