<!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. java 蓝桥杯算法提高 _2最大最小公倍数

    解题思路: 1. n是奇数,那就最大的三个数相乘2. n是偶数,得分两种情况了, ①如果n不是3的倍数,那就s=n*(n-1)*(n-3)---n与n-2同为偶数,故排除一个n-2: ②n是3的倍数, ...

  2. 如何显示当前Mipmap级别？

    [如何显示当前Mipmap级别?] 乘以 mainTextureSize/mipTextureSize是为了让mipColorsTexture纹理与mainTexture级别对应.直接用uv是不行的, ...

  3. Python基础：面向对象基础 (一) 类及其属性和魔法方法

    定义类,添加和获取对象属性 # 定义类 格式如下 # class 类名: # 方法列表 # 新式类定义形式 # info 是一个实例方法,第一个参数一般是self,表示实例对象本身 class Her ...

  4. git远程代码库回滚(webstorm下)

    git远程代码库回滚(webstorm下) 1. 场景 添加了一个文件[file-for-test.js]到git的控制下 进行了三次修改,并分别进行了三次commit,最后进行了一次push git ...

  5. lnline Hook初试

    简单解释下hook: 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理 ...

  6. Ros学习——Cmakelists.txt文件解读

    1.过程 .Required CMake Version (cmake_minimum_required) //CMake 需要的版本 .Package Name (project()) //#定义工 ...

  7. Opencv 图片直方图

    #include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...

  8. jedis的publish/subscribe[转]含有redis源码解析

    首先使用redis客户端来进行publish与subscribe的功能是否能够正常运行. 打开redis服务器 [root@localhost ~]# redis-server /opt/redis- ...

  9. [模板]单源最短路径（Dijkstra）

    如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 主要还是再打一遍最短路,这种算法我用的不多... #include<bits/stdc++.h> using namesp ...

  10. TF Boys (TensorFlow Boys ) 养成记（五）： CIFAR10 Model 和 TensorFlow 的四种交叉熵介绍

    有了数据,有了网络结构,下面我们就来写 cifar10 的代码. 首先处理输入,在 /home/your_name/TensorFlow/cifar10/ 下建立 cifar10_input.py,输 ...