<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>select的placeholder和分组效果</title>

    </head>

    <body>

        <select>

            <!--placeholder 效果-->

            <option value="" disabled selected>Select your option</option>

            <!--分组效果-->

            <optgroup label='小学'>

                <option value='5'> 1年级</option>

                <option value='6'> 2年级</option>

                <option value='7'> 3年级</option>

                <option value='8'> 4年级</option>

                <option value='9'> 5年级</option>

                <option value='10'> 6年级</option>

            </optgroup>

        </select>

    </body>

</html>

效果：

select的placeholder和分组效果的更多相关文章

  1. input/select/textarea标签的readonly效果实现

    首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...

  2. select元素中设置padding效果

    更新2016-9-17:这个bug是在mac os上的发生,在window系统中不存在这个问题! 给select元素增加:padding-left:20px;但是未生效,如下图所示: 在select上 ...

  3. Android 开源库StickyListHeadersListView来实现ListView列表分组效果

    项目中有一新的需求,要求能像一些Android机带"联系人列表"一样,数据可以自动分组,且在列表滑动过程中,列表头固定在顶部,效果图如下: 下面就带大家实现上面的效果, 首先,我们 ...

  4. 给select增加placeholder技巧

    转自:http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box/8442831 使 ...

  5. 用jquery ajax做的select菜单，选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...

  6. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  7. LINQ简明教程：数据排序、分组、过滤

    LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...

  8. TSQL 分组集（Grouping Sets）

    分组集(Grouping Sets)是多个分组的并集,用于在一个查询中,按照不同的分组列对集合进行聚合运算,等价于对单个分组使用“union all”,计算多个结果集的并集.使用分组集的聚合查询,返回 ...

  9. 多功能前台交互效果插件superSlide

    平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...

随机推荐

  1. CLR基础，CLR运行过程，使用dos命令创建、编译、运行C#文件，查看IL代码

    CLR是Common Language Runtime的缩写,是.NET程序集或可执行程序运行的一个虚拟环境.CLR用于管理托管代码,但是它本身是由非托管代码编写的,并不是一个包含了托管代码的程序集, ...

  2. MVC二级联动使用$.ajax方法获取后端返回的字符串

    在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动.   ...

  3. java string常见操作（二）

  4. pytest文档21-pytest-html报告优化（nodeid中文显示[\u6350\u52a9\u6211\u4eec]问题解决）

    前言 pytest-html报告中当用到参数化时候,获取用例的nodeid里面有中文时候,会显示[\u6350\u52a9\u6211\u4eec]这种编码(再次声明,这个不叫乱码,这是unicode ...

  5. shader内置变量

    内置变量都在UnityShaderVariables.cginc文件中声明 变换矩阵 All these matrices arefloat4x4 type. Name Value UNITY_MAT ...

  6. Android图片加载框架最全解析（三），深入探究Glide的缓存机制

    在本系列的上一篇文章中,我带着大家一起阅读了一遍Glide的源码,初步了解了这个强大的图片加载框架的基本执行流程. 不过,上一篇文章只能说是比较粗略地阅读了Glide整个执行流程方面的源码,搞明白了G ...

  7. Lombok的安装及入门

    lombok 的官方网址:http://projectlombok.org/ lombok 其实到这里我就介绍完了,开个玩笑,其实官网上有 lombok 三分四十九秒的视频讲解,里面讲的也很清楚了,而 ...

  8. 是否应该将SAN上的SQL Server中的user database的data文件, log文件和TempDB文件放在不同的LUN上?

    请看下面的两个精彩解答: 解答1: If your SAN has performance and availability algorithms built into the management ...

  9. js中replace的用法

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也 ...

  10. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...