淘宝/天猫如何自定义页面页头元素的搜索框代码

如图，这样的效果：

在页面的顶部加入搜索框。

无论是淘宝还是天猫都可以，但是代码有一些区别，编码不一样。

下面是代码展示：

淘宝

<div
style="background:none;border:0;padding:0;width:1920px;height:880px;position:relative;top:0;left:0;right:0;background-image:url(990*120的背景图片地址);background-repeat:no-repeat;background-attachment:scroll;">
<div class="keywords sform"
    style="width: 198px; height: 25px; overflow: hidden; bottom: -5%; left: 34%; padding: 0; background-image: url(200*25的单独的搜索框地址); position: relative; display: flex;">
    <form action="店铺首页地址" method="get" target="_blank"
        style="display: flex; width: 100%;height: 100%;">
        <input name="search" type="hidden" value="y" />
        <input class="keyword-input prompt" name="keyword" type="text"
            style="width: 76%; height: 100%; background: transparent; border: none; outline: none;padding-left: 6%;" />
        <input class="btn" type="submit" value="搜索"
            style="opacity: 0;width: 16%; height: 100%; font-size: 12px; cursor: pointer; border: none; outline: none;" />
    </form>
</div>
</div>

解释一下上面的代码：

第一个div是背景图片。

第二个的div是搜索框。搜索框是透明的。

你要修改的地方是

1.(990*120的背景图片地址)

2.(200*25的单独的搜索框地址)

3.action="店铺首页地址"

这三个地址，前两个是图片空间，你直接去复制即可，第三个是装修页面的地址即可。

其中，核心代码是：

<input name="search" type="hidden" value="y" />

一定不要删除这个，其他可以自行修改。

天猫

<div
    style="background:none;border:0;padding:0;width:1920px;height:880px;position:relative;top:0;left:0;right:0;background-image:url(990*120的背景图片地址);background-repeat:no-repeat;background-attachment:scroll;">
    <div class="keywords sform"
        style="width: 198px; height: 25px; overflow: hidden; bottom: -5%; left: 34%; padding: 0; background-image: url(200*25的单独的搜索框地址); position: relative; display: flex;">
        <form class="J_TCrumbSearchForm" accept-charset="ASCII" action="店铺首页地址"
            method="post" style="display: flex; width: 100%;height: 100%;">
            <input name="search" type="hidden" value="y" />
            <input type="text" class="crumbSearch-input J_TCrumbSearchInuput" value="" name="keyword"
                style="width: 76%; height: 100%; background: transparent; border: none; outline: none;padding-left: 6%;" />
            <input class="crumbSearch-btn J_TCrumbSearchBtn" type="submit" value="搜索"
                style="opacity: 0;width: 16%; height: 100%; font-size: 12px; cursor: pointer; border: none; outline: none;" />
        </form>
    </div>
</div>

注意事项：

基本上和上面淘宝的代码一样，只不过是form表单里面要加上accept-charset="ASCII"，转换一下编码，即可。