<!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. 网络编程基础之Socket套接字

    一.Socket介绍 1.什么是socket? Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族 ...

  2. (转) Linux下配置nfs并远程挂载

    nfs是网络文件系统,允许一个节点通过网络访问远程计算机的文件系统,远程文件系统可以被直接挂载到本地,文件操作和本地没有区别,如果是局域网的nfs那么io的性能也可以保证,下面就以CentOS 7.x ...

  3. linux下使用gtest框架进行c/c++单元测试

    linux下使用gtest框架进行c/c++单元测试 前言 关于此次开发工具的选择,因为我最近尝试在linux下使用vim进行c/c++编程,且之前已经对vim进行了相关的配置,所以这里应作业要求直接 ...

  4. 解剖Nginx·自动脚本篇（1）解析配置选项脚本 auto/options

    在安装Nginx之前(即运行make脚本之前),首先是进行安装的配置准备,包括环境检查及生成文件.这些工作是由自动脚本完成的.和绝大多数软件一样,Nginx的自动脚本的入口,同样是名为configur ...

  5. iOS 10 适配 ATS（app支持https通过App Store审核）

    iOS 10 适配 ATS 一. HTTPS 其实HTTPS从最终的数据解析的角度,与HTTP没有任何的区别,HTTPS就是将HTTP协议数据包放到SSL/TSL层加密后,在TCP/IP层组成IP数据 ...

  6. 一致性协议之Paxos算法

    一.算法提出背景 Paxos算法需要解决的问题就是如何在一个可能发生诸如宕机或网络异常情况的分布式气筒中,快速且正确地在集群内部对某个数据的值达成一致,并且保证不论发生以上任何异常,都不会破坏整个系统 ...

  7. C#中接口声明属性，但是提示“接口”中不能有属性。

    C#中接口定义属性如下所示: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  8. PHP json_encode中文unicode转码问题

    用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式,如果想汉字不进行转码,这里提供三种方法 1.升级PHP,在PHP5.4, 这个问题终于得 ...

  9. SQL虚拟数字辅助表

    虚拟数字辅助表是一个整数序列,可以用来完成多种不同的任务,如生成日期跟时间值序列,及分裂值列表.要用查询逻辑产生一个大的整数序列,可以使用交叉连接(cross join). 交叉联接(cross jo ...

  10. Redis实现高并发下的抢购、秒杀功能

    博主最近在项目中遇到了抢购问题!现在分享下.抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖" ...