使用自定义“搜索”按钮修饰文本输入字段
要创建与某些网站上看到的类似的搜索元素,请按照这些步骤:
创建基本结构:
<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>
<code class="html"><span id="g-search-button"></span></code>
添加放大镜图像:
要合并放大镜图像,请使用CSS的背景指定它-image 属性:
<code class="css">#g-search-button { background-color: black; /* Replace with your own image */ }</code>
定位和样式:
要在文本输入字段中定位图像:
<code class="css">#g-search-button { position: relative; left: -22px; top: 3px; width: 16px; height: 16px; }</code>
此位置图像稍微向左倾斜,与搜索框的右边缘重叠。
自定义:
通过调整 #g 中的值来修改按钮的外观-search-button CSS 块,包括背景颜色、大小和位置。
实际示例:
请参阅以下 JSBin 示例以查看完整功能搜索元素的实现:
[JSBin 演示](https://jsbin.com/xahepu/edit?html,css,output)
以上是如何创建带有放大镜图标的自定义“搜索”按钮?的详细内容。更多信息请关注PHP中文网其他相关文章!