搜索框样式代码（搜索框css代码）[20240425更新]

本篇文章给大家谈谈搜索框样式代码，以及搜索框css代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html制作一个搜索框，代码是什么？
• 2、怎么写搜索框中的代码啊？
• 3、CSS搜索框样式
• 4、淘宝搜索框自定义代码
• 5、淘宝搜索框代码
• 6、搜索框的代码怎么写

html制作一个搜索框，代码是什么？

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：

怎么写搜索框中的代码啊？

首先把搜索宽切片下来再CSS样式里面用为背景

body

form action="" method="get"

div class="kuan"input name="" type="text" //div!--搜索框--

div class="an"input name="" type="button" //div!--搜索按钮版--

/form

/body

CSS样式根据实际权自己调整

style type="text/css"

.kuan input{ width:330px; height:60px; background:background:url(../img/kuan_01.jpg) no-repeat; border:none; float:left}

.an input{ width:120px; height:60px; background:background:url(../img/an_02.jpg) no-repeat;border:none; float:left}

/style

CSS搜索框样式

这个搜索框做的很好，看似简单，里面包含了大量CSS基础知识。由于时间关系，这里写了一个相似度为95%的样式供参考和学习，由于无法确认字体，先挑选了比较接近的Gautami

先上HTML

body

    div id="A"

        input id="inputTxt" type="text" placeholder="Search" /

        div id="inputBtn"Go/div

    /div

/body

这里开始写CSS

body { padding: 0; margin: 0; background: #D6D6D6; }

/*固定容器*/

#A { width: 316px; height: 28px; margin: 22% auto; border: 1px solid #A3A3A3; border-top-color: #939393; border-bottom-color: #D5D5D5; border-radius: 3px; box-shadow: 0px 1px 1px #f4f4f4; position: relative; }

    #A  * { position: absolute; top: 0; }

/*输入框*/

#inputTxt { left: 0; width: 246px; height: 24px; background: #E6E6E6; border: 0; border-top: 1px solid #C8C8C8; border-bottom: 1px solid #E6E6E6; outline: none; padding-left: 30px; color: #666; }

    #inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { color: #B8B8B8; font: 600 13px 'Gautami'; }

/*按钮*/

#inputBtn { right: 0; width: 38px; height: 26px; line-height: 26px; background: linear-gradient(#E4E4E4, #B5B5B5); border: 1px solid transparent; border-top-color: #FCFCFC; border-left-color: #ADADAD; border-bottom-color: #B5B5B5; color: #6E6E6E; text-align: center; font-size: smaller; font-weight: bold; cursor: pointer; }

/*文字阴影*/

#inputTxt, #inputBtn, #inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { text-shadow: 1px 1px 0px #fff; }

/*图标*/

#A:before, #A:after { content: ""; position: absolute; z-index: 2; box-shadow: 0px 1px 0px #fff; }

#A:before { left: 9px; top: 9px; width: 6px; height: 6px; border: 2px solid #ccc; border-radius: 50%; }

#A:after { left: 17px; top: 18px; width: 6px; height: 2px; background: #ccc; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }

最后，上效果图：上为原始搜索框，下为本次代码实现的搜索框

淘宝搜索框自定义代码

!--

·1 此代码默认尺寸200x30 像素（文本框：170x30 像素； 提交按钮：30x30 像素）;

·2 代码仅为框架，可通过使用内联样式添加背景图片实现效果；

·3 如需使用 border 属性添加边框，请勿删除之前的border样式，并且要减去相应的高宽数值

--

!-- 搜索代码 --

form action="#店铺搜索页链接" method="get" target="_blank" style="width:200px; height:30px; border:0; padding:0; outline:none;"

  !-- 搜索按钮 --

  input name="search" type="submit" value="" style="width:30px; height:30px; background-color:#C9C9C9; border:0; padding:0; outline:none; cursor:pointer; float:right;"

  !-- 搜索按钮 End-- 

  !-- 文本输入 --

  input name="keyword" type="text" value="" style="width:170px; height:30px; background-color:#E5E5E5; border:0; padding:0; outline:none; text-indent:5px; cursor:text; float:left;"

  !-- 文本输入 End--

/form

!-- 搜索代码 End--

回答中无法添加具体链接，代码中 “#店铺搜索页链接” 即为打开店铺搜索页，地址栏内的地址链接，可只保留到 search.htm 位置

具体操作可读注释，更多问题可追问或私信

具体效果可搜索浏览 “盈兆电器专营店”

满意请随手 点赞 支持 (๑•̀ㅂ•́)و✧

淘宝搜索框代码

淘宝搜索框代码大全

1、完整的淘宝搜索代码：淘宝LOGO+分类栏目+热门关键词+ 搜索按钮

script type='text/javascript'

alimama_pid='mm_12239410_0_0';

alimama_type='g';

alimama_tks={};

alimama_tks.style_i=1;

alimama_tks.lg_i=1;

alimama_tks.w_i=572;

alimama_tks.h_i=69;

alimama_tks.btn_i=1;

alimama_tks.txt_s='';

alimama_tks.hot_i=1;

alimama_tks.hc_c='#0065FF';

alimama_tks.c_i=1;

alimama_tks.cid_i=0;

/script

script type='text/javascript' src=''/script

2、无淘宝LOGO的搜索代码：分类栏目+热门关键词+ 搜索按钮

script type='text/javascript'

alimama_pid='mm_12239410_0_0';

alimama_type='g';

alimama_tks={};

alimama_tks.style_i=1;

alimama_tks.lg_i=0;

alimama_tks.w_i=572;

alimama_tks.h_i=69;

alimama_tks.btn_i=1;

alimama_tks.txt_s='';

alimama_tks.hot_i=1;

alimama_tks.hc_c='#0065FF';

alimama_tks.c_i=1;

alimama_tks.cid_i=0;

/script

script type='text/javascript' src=''/script

3、无LOGO和分类栏目的淘宝搜索代码：热门关键词+ 搜索按钮

script type='text/javascript'

alimama_pid='mm_12239410_0_0';

alimama_type='g';

alimama_tks={};

alimama_tks.style_i=1;

alimama_tks.lg_i=0;

alimama_tks.w_i=572;

alimama_tks.h_i=69;

alimama_tks.btn_i=1;

alimama_tks.txt_s='';

alimama_tks.hot_i=1;

alimama_tks.hc_c='#0065FF';

alimama_tks.c_i=0;

alimama_tks.cid_i=0;

/script

script type='text/javascript' src=''/script

搜索框的代码怎么写

首先把搜索宽切片下来再CSS样式里面用为背景

body

form action="" method="get"

div class="kuan"input name="" type="text" //div!--搜索框--

div class="an"input name="" type="button" //div!--搜索按钮--

/form

/body

CSS样式根据实际自己调整

style type="text/css"

.kuan input{ width:330px; height:60px; background:background:url(../img/kuan_01.jpg) no-repeat; border:none; float:left}

.an input{ width:120px; height:60px; background:background:url(../img/an_02.jpg) no-repeat;border:none; float:left}

/style

关于搜索框样式代码和搜索框css代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。