<!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. Android中播放本地SD卡中歌曲须要的加入的权限

    使用MediaPlayer播放本地Mp3文件时.须要注意的訪问路径的问题以及訪问权限的问题. 1.訪问路径:/storage/emulated/0 此路径即为手机的根路径,能够通过下载ES文件浏览器软 ...

  2. Fast dev didn't succeed, trying another location

    Android 调试时,出现快盘加载失败问题.调试输出如下: Fast dev didn't succeed, trying another location 解决办法: 将项目属性->Andr ...

  3. 具体解释Ajax技术

    Ajax 可以做什么? 现在 Google Suggest 和 Google Maps 使用了 Ajax,通过 Ajax,我们能够使得client得到丰富的应用体验及交换操作,而用户不会感觉到有网页提 ...

  4. iOS appStore中的应用 实现升级功能

    .h文件中 <UIAlertViewDelegate> .m文件中 #import "SBJson.h"        //解析sbjson 数据 - (void)vi ...

  5. C\C++各路高手以及操作系统专家请进来杀死这个进程

    通常情况下编写一个程序,能够点击关闭button正常结束程序,也能够使用任务管理器结束任务,还能够使用taskkill等命令杀死进程,实在都不行也能够直接重新启动计算机. 可是,这些方法真的都管用吗? ...

  6. Linux 防火墙 iptables基本操作

    1:临时性关闭开启防火墙,重启后失效开启service iptables start关闭service iptables stop/etc/rc.d/init.d/iptables stop 2:永久 ...

  7. Bash,Vim,gdb&git常用命令

    Bash 目录 pwd  //查看当前目录 mkdir dir1 dir2  //创建目录 tree dir1 mv test1.cpp test2.cpp dir1 dir  //移动文件/目录到目 ...

  8. " 初窥 " nginx

    1. 无题 第一次听到Nginx这个词,还是两年前的事儿了,最近常逛CSDN,越来越频繁的接触到这个词汇,今天看了些资料,简单的总结下,作为入门. 2. 背景介绍: Nginx (发音同 engine ...

  9. SQL Server基础知识三十三问 (7-14)

    8. 一般什么时候使用update_statistics命令? 答:  这个命令基本上是在很多数据被处理过了之后才使用的. 如果大量的删除, 修改, 或这大量的数据插入已经发生了, 那么index就需 ...

  10. 页面的缓存设置与meta的作用详细解释

    网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...