gpt4 book ai didi

css - 带有附加按钮的 Bootstrap 搜索输入 - 在所有边上显示圆 Angular

转载 作者:技术小花猫 更新时间:2023-10-29 11:24:23 26 4
gpt4 key购买 nike

<分区>

我正在使用 Twitter Bootstrap .

这是 a fiddle with my code .这是打开的 Github Issue


我已经实现了带有附加按钮的搜索输入,per the Bootstrap docs .我的HTML表格显示在这里

<form class="form-search text-center" method="get" action="#">
<div class="input-append">
<input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
<button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
</div>
</form>

出于某种原因,在移动设备(即 iPhone 5)上查看表单时,搜索框显示如下面的屏幕截图所示: Bootstrap Search input append with rounded corners

当我在桌面浏览器中查看搜索表单并将其调整为“移动大小”时,搜索框显示正确,如第二个屏幕截图所示(忽略较浅的边框和大小差异):

Bootstrap search input on desktop

-------- 问题 --------

如何防止第一个屏幕截图中的搜索输入显示不正确?是什么原因造成的?我查看了两个搜索输入的来源和计算样式,一切似乎都一样。帮忙?

如果我更改 input type="search"type="text"问题不存在,所以它必须在 CSS 中的某个地方,但我无法弄清楚。什么 CSS 实际应用了这种效果?

-------- 更新 --------

如果我切换 <div class="input-append"><div class="input-prepend">搜索输入显示正确。此外,当该字段具有焦点时,右侧的圆 Angular 会变成“方形”并正确显示。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com