html如何添加搜索框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html如何添加搜索框相关的知识,希望对你有一定的参考价值。
参考技术A input元素标签+搜索的button按钮,就是最简单的搜索框啊,使用 form表单提交搜索的关键字即可。 参考技术B 回答html搜索框怎么做使用HTML做搜索框的方法:1、首先新建一个div,id名为box,用来包裹搜索框;2、然后在内部添加一个input标签和一个div标签,一个用来输入文字,一个充当按钮;3、最后使用css为它们设计样式即可。
如何在搜索框中添加图标
【中文标题】如何在搜索框中添加图标【英文标题】:How to add an icon in a search box 【发布时间】:2018-06-10 19:57:31 【问题描述】:需要回答的问题: 如何在搜索框/表单中添加图标 如何在输入字段中添加图标
我遇到了以下问题,我无法将 FontAwesome fa-search 图标放在输入字段/搜索框的右侧。
这是表单的图片:A HTML search form on a website's header
此处的表格链接(不是常青树):https://www.themirrorman.co
这是我的原始代码:
@media screen and (min-width: 800px)
#header-search-desktop-div
position: absolute;
left: 180px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
border: 1px solid #881d98;
border-radius: 24px;
#header-search-desktop-div #header-search-fa
position: absolute;
color: #7E7E7E;
z-index: 100;
font-size: 27px;
#header-search-desktop-div .fa-search
top: 5%;
left: 1.5%;
line-height: 0.8em;
<div id="header-search-desktop-div">
<form role="search" method="get" class="searchform" action="https://themirrorman.co/">
<span id="header-search-fa" class="fa fa-search">
<input id="header-search-desktop-input" name="product-search" type="text" value="" placeholder="Product Search…">
<input type="hidden" name="post_type" value="product" />
</span>
</form>
</div>
我收到了答案并更改了以下代码,它现在可以像上面的图片链接一样工作:
#header-search-submit
position: absolute;
z-index: 1;
padding: 0;
right: 15px;
top: 6px;
font-size: 24px;
font-family: FontAwesome;
color: #7B7B7B;
cursor: pointer;
background: 0;
border: 0;
<div id="header-search-desktop-div">
<form id="header-search-form" role="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." />
<input id="header-search-submit" type="submit" value="" name="post_type" />
</span>
</fieldset>
</form>
</div>
【问题讨论】:
一旦您得到问题的答案,您链接的网站就会发生变化,让未来读者寻找答案的问题无关紧要。通过在问题本身中添加 minimal reproducible example 来确保您的问题仍然相关。 您好 Andrei,感谢您的反馈。我现在已经按照你的要求做了,请确认我做的好不好? 将答案标记为已接受足以告诉所有人您的问题已解决,您无需将其放入问题中。一般来说,去掉特殊的部分,只留下理解和回答问题所必需的部分,这是将重要问题与其他问题区分开来的事情之一。因为未来的读者会花更少的时间来理解它。感谢您调整您的问题,欢迎来到Stack Overflow。 【参考方案1】:查看以下受此链接启发的代码: How do I add a Font Awesome icon to input field?
input[type="search"]
font-family: FontAwesome;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<!-- Where fOO2 is the Unicode value for the fa-search icon -->
<input type="search" placeholder=" Search" >
编辑:2020 年 7 月 23 日 我最近再次访问了这个问题,并想添加一个替代解决方案。我基本上复制了谷歌搜索栏的代码并添加了我自己的调整。搜索栏从左到右由标签、输入和按钮组成。
body
height: 100%;
background-color: rgb(230, 230, 230);
/* -----search-container styles----- */
.search-container
--searchbox-height: 44px;
margin: 0 auto 0 auto;
min-width: 410px;
width: var(--content-width);
/* -----searchbar styles----- */
.searchbar
background: white;
cursor: text;
margin: 0 auto;
max-width: 584px;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
border-radius: 22px;
box-sizing: border-box;
font-size: 16px;
height: var(--searchbox-height);
position: relative;
/* -----search-input styles----- */
.search-input
box-sizing: border-box;
margin: 0;
height: 100%;
width: calc(100% - 80px);
border-color: transparent;
color: rgb(117, 117, 117);
font-size: 16px;
line-height: 44px;
margin: auto 0;
overflow: hidden;
text-align: initial;
text-overflow: ellipsis;
user-select: none;
vertical-align: middle;
white-space: nowrap;
.search-input:focus
outline: transparent;
.search-input:focus::placeholder
color: transparent;
/* -----search-icon styles---- */
.search-icon-wrapper
padding: 0 24px;
/* margin-right: 48px; */
.search-icon
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzVGNjM2OCI+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0E2LjQ3MSA2LjQ3MSAwIDAgMCAxNiA5LjUgNi41IDYuNSAwIDEgMCA5LjUgMTZjMS42MSAwIDMuMDktLjU5IDQuMjMtMS41N2wuMjcuMjh2Ljc5bDUgNC45OUwyMC40OSAxOWwtNC45OS01em0tNiAwQzcuMDEgMTQgNSAxMS45OSA1IDkuNVM3LjAxIDUgOS41IDUgMTQgNy4wMSAxNCA5LjUgMTEuOTkgMTQgOS41IDE0eiIvPjwvc3ZnPg==);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 20px;
background-color: rgb(117, 117, 117);
bottom: 0;
left: 16px;
margin: auto;
position: absolute;
top: 0;
width: 24px;
/* -----search-microphone styles----- */
.search-microphone
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIvPjxwYXRoIGZpbGw9IiM0Mjg1RjQiIGQ9Ik0xMiAxNWMxLjY2IDAgMi45OS0xLjM0IDIuOTktM0wxNSA1YzAtMS42Ni0xLjM0LTMtMy0zUzkgMy4zNCA5IDV2N2MwIDEuNjYgMS4zNCAzIDMgM3oiLz48cGF0aCBmaWxsPSIjMzRBODUzIiBkPSJNMTEgMTguOTJoMlYyMmgtMnoiLz48cGF0aCBmaWxsPSIjRjRCNDAwIiBkPSJNNyAxMkg1YzAgMS45My43OCAzLjY4IDIuMDUgNC45NWwxLjQxLTEuNDFDNy41NiAxNC42MyA3IDEzLjM4IDcgMTJ6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTEyIDE3Yy0xLjM4IDAtMi42My0uNTYtMy41NC0xLjQ3bC0xLjQxIDEuNDFBNi45OSA2Ljk5IDAgMCAwIDEyLjAxIDE5YzMuODcgMCA2Ljk4LTMuMTQgNi45OC03aC0yYzAgMi43Ni0yLjIzIDUtNC45OSA1eiIvPjwvc3ZnPg==) no-repeat center;
background-size: 21px 21px;
bottom: 0;
cursor: pointer;
margin-inline-end: 16px;
padding: 22px 12px 0;
position: absolute;
right: 0;
top: 0;
width: 21px;
border-color: transparent;
<div class="search-container">
<div class="searchbar">
<label for="search-input" class="search-icon-wrapper">
<div class="search-icon"></div>
</label>
<input type="text" class="search-input" id="search-input" placeholder="Search Google or type a URL">
<button class="search-microphone"></button>
</div>
</div>
【讨论】:
感谢您的建议!我现在修改了这篇文章并将您的答案标记为最佳。以上是关于html如何添加搜索框的主要内容,如果未能解决你的问题,请参考以下文章