<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{ margin: 0; padding:0; }

        /*搜索框*/

        input,button{border:0;}

        ul{ list-style: none }

        .fl{ float: left; }

        .search{width: 843px;height: 45px;border: 2px solid #a1cb30;margin: 38px auto; }

        .sel_wrapper{width:118px;height: 43px;border: 1px solid #dddddd;background-color: #f7f7f7;position: relative;z-index: 10;cursor:pointer;}

        .sel_wrapper a{display: block;}

        .sel_wrapper span{display: inline-block;}

        .game{width: 65px; line-height: 43px;font-size: 16px;padding-left: 19px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

        .sel_wrapper .sel em{ display: inline-block; width: 14px;height: 7px;margin-bottom: 18px; background: url(arrow_down.png) no-repeat right center;margin-left: 10px;}

        .sel_wrapper .sel em.arrow_up{ width:14px; height: 7px; background:url(arrow_top.png) no-repeat right center;  }

        .input{width: 633px;height: 43px;line-height: 43px; border: 0;padding-left: 10px;font-size: 16px;}

        .btn{width: 80px;*width: 79px;width: 79px\9;_width: 70px;height: 45px;background-color: #a1cb30;color: #fff;font-size: 18px; }

        /*下拉框*/

        .select_block {background-color: #f7f7f7;border-left: 2px solid #a1cb30;border-right: 1px solid #dedede;border-bottom: 2px solid #a1cb30;left: -3px;line-height: 20px;position: absolute;top: 43px;width: 119px;display: none;}

        .select_block li{ height: 35px; line-height: 35px;text-align: center; border-bottom:1px solid #ddd; font-size: 14px; }

        .select_block li:hover{ background: #617559; color: #fff; }

    </style>

</head>

<body>

<div class="search">

    <form>

        <div class="sel_wrapper fl">

            <div class="sel" id="sel">

                <span class="game" id="game">安卓游戏</span>

                <em></em>

            </div>

            <div class="select_block" id="show_sel">

                <ul>

                    <li date-vale="1">首页</li>

                    <li date-vale="2">安卓软件</li>

                    <li date-vale="3">破解游戏</li>

                    <li date-vale="4">电脑软件</li>

                </ul>

            </div>

        </div>

        <input type="hidden" value="1" id="hide_val" />

        <input type="text" value="" placeholder="部落冲突" class="input fl w402">

        <input type="submit" value="搜索" class="btn fr">

    </form>

</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function() {

        $("#sel").click(function() { //点击事件

            if ($('#show_sel').is(':hidden')) {

                $("#show_sel").show();

                $(this).find("em").addClass("arrow_up"); //发现它子级em添加class命名“arrow_up”

            }else{

                $("#show_sel").hide(); //显示

                $("#sel").find("em").removeClass("arrow_up"); //移除class命名"arrow_up"

            }

        });

        $("#show_sel li").click(function() { //li点击事件

            $("#show_sel").hide(); //隐藏

            var txt = $(this).text(); //定义一个变量txt给本身的文本赋值

            $("#game").text(txt); //#game的文本就是txt的文本

            $("#sel").find("em").removeClass("arrow_up"); //移除class命名"arrow_up"

            var value = $(this).attr("date-vale"); //定义一个变量给本身的属性值赋值

            $("#hide_val").val(value); //隐藏的值就是属性值

        });

    });

</script>

</body>

</html>

效果图：

如何去除ie的select下拉框箭头图标

<style>

        select {

            /*将默认的select选择框样式清除*/

            appearance: none;

            -moz-appearance: none;

            -webkit-appearance: none;

            background: url("/assets/img/caret.png") no-repeat scroll right center transparent;

        }

        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/

        select::-ms-expand {

            display: none;

        }

    </style>

二、有间隙，原来是input大小不包括边框，当selet和input同事存在同事有设置边框，如select的高度设置30px，则input[type='text'](注：input[type='submit']设置30px也没影响，不会有缝隙，自测)高度设置28px就可以

解决后：

select的css width样式，包含边框和内边距，即：真实的width=CSS width。

而input的css width样式，则不包含边框和内间距，真实的width=CSS width border padding。

代码：

<div class="public_form_right">

                <div class="public_fr_list">

                    <select name="sheng" class="public_che_sel fl">

                        <option value="京">京</option>

                    </select>

                    <select name="frist" class="public_che_sel fl">

                        <option value="A">A</option>

                    </select>

                    <input type="text" class="public_che_input fl">

                    <input type="submit" class="btn fl" value="车牌测吉凶">

                </div>

            </div>

样式：

.public_form_right{ overflow: hidden; background-color: #fff; padding-bottom: 10px;}

.public_form_title{ height: 37px;line-height: 37px; color: #774889; font-size: 20px; border-bottom: 1px solid #eae8e9; padding: 0 10px; display: block;}

.public_fr_list{ overflow: hidden; margin:10px 10px 0;border: 1px solid #d1d1d1; border-right:;}

.public_fr_list select{ float: left; height: 30px; line-height: 30px;}

.public_fr_list input[type='text']{ padding-left: 5px; float: left; height: 28px; line-height: 28px;}

.public_fr_list .btn{ width: 80px;text-align: center; background-color: #f0f0f0; color: #575757; height: 30px; line-height: 30px; font-family: "Microsoft Yahei";font-size: 14px;border-right: 1px solid #d1d1d1; cursor: pointer; box-sizing: border-box}

.public_fr_list .btn:hover{ color: #fff; background-color: #b0afaf;}

/* 车牌测吉凶 */

.public_che_sel{ width: 54px; border:; border-right: 1px solid #d1d1d1;}

.public_che_input{ width: 85px; border:; border-right: 1px solid #d1d1d1;}

三、注意：按钮同个命名，a标签宽度设置80不会有缝隙，用input[type="submit"]同样宽度设置80px，但是会有1像素的缝隙，加个样式就不会了，宽度设置为81px;box-sizing: border-box;如图：

样式设置：

box-sizing: border-box;

.public_form_right{ overflow: hidden; background-color: #fff; padding-bottom: 10px;}

.public_form_title{ height: 37px;line-height: 37px; color: #774889; font-size: 20px; border-bottom: 1px solid #eae8e9; padding: 0 10px; display: block;}

.public_fr_list{ overflow: hidden; margin:10px 10px 0;border: 1px solid #d1d1d1; border-right:;}

.public_fr_list select{ float: left; height: 30px; line-height: 30px;}

.public_fr_list input[type='text']{ padding-left: 5px; float: left; height: 28px; line-height: 28px;}

.public_fr_list .btn{ width: 80px;text-align: center; background-color: #f0f0f0; color: #575757; height: 30px; line-height: 30px; font-family: "Microsoft Yahei";font-size: 14px;border-right: 1px solid #d1d1d1; cursor: pointer; box-sizing: border-box}

.public_fr_list .btn:hover{ color: #fff; background-color: #b0afaf;}

/* 车牌测吉凶 */

.public_che_sel{ width: 54px; border:; border-right: 1px solid #d1d1d1;}

.public_che_input{ width: 85px; border:; border-right: 1px solid #d1d1d1;}

取消input聚焦时的边框，去除ios点击时，自动添加的底色效果

解决方案：

input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea,button {

    /*去除ios点击时，自动添加的底色效果*/

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    /*去除焦点框*/

    outline:none;

}

搜索下拉 select美化的更多相关文章

  1. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  2. layui-table-column-select（layui数据表格可搜索下拉框select）

    layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...

  3. ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug

    前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...

  4. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  5. select下拉框美化

      其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  6. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  7. element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法

    参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...

  8. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  9. 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

随机推荐

  1. windows server R2 密钥

    一.win2012r2激活码 永久激活 Volume版 Windows Server 2012 R2 Datacenter数据中心版: [Key]:TVNTG-VFJQ3-FQXFP-DVCP6-D3 ...

  2. Writing Surface Shaders

    [Writing Surface Shaders] Writing shaders that interact with lighting is complex. There are differen ...

  3. Eclipse快捷键大全（补充）

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+Shift+O 自动导入所需要的包(这个用的次数也相当多)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增 ...

  4. Action的三种编写方式

    -------------------siwuxie095 Action 的三种编写方式 在 Struts2 的应用开发中,Action 作为框架的核心类,实现 对用户请求的处理,Action 类被称 ...

  5. ios加载本地html

    UIWebView加载工程本地网页与本地图片 - (void)viewDidLoad { [super viewDidLoad]; NSString *filePath = [[NSBundle ma ...

  6. Openssl pkey命令

    一.简介 pkey是一个公钥或私钥的处理命令,可以用于打印和转换不同的表单和组件 二.语法 openssl pkey [-inform PEM|DER] [-outform PE|DER] [-in ...

  7. 常用的 Python 调试工具，Python开发必读-乾颐堂

    以下是我做调试或分析时用过的工具的一个概览.如果你知道有更好的工具,请在评论中留言,可以不用很完整的介绍. 日志 没错,就是日志.再多强调在你的应用里保留足量的日志的重要性也不为过.你应当对重要的内容 ...

  8. STM32F4通用定时器

    1.基本原理 三种定时器区别 通用定时器功能特点描述 在这里只用输入捕获事件也能获取脉冲个数同时可以只使用它来获取脉冲宽度,比如当捕获到上升沿,马上进入中断,把计数器的值置零,然后等待捕获下降沿的到来 ...

  9. Part2_lesson4---ARM寻址方式

    所谓寻址方式就是处理器根据指令中给出的信息来找到指令所需操作数的方式. 1.立即数寻址 ADD R0,R0,#0x3f; R0<-R0+0x3f 在以上指令中,第二个源操作数即为立即数,要求以“ ...

  10. JSON Web Token（JWT）学习笔记

    1.JWT 的Token 标准的Token由三个部分并以.(点号)连接方式组成,即 header.payload.signature,如下 eyJhbGciOiJIUzI1NiIsInR5cCI6Ik ...