ionic.css界面组件:表单-选择框

选择框 : .item-select select

在每个平台上,选择框的表现形式都不一样,例如,在PC上,是一个传统的下拉框,在Android 是一个单选弹出窗,而iOS上是一个覆盖半个窗体的定制滚动器:

通常总是将选择框与文字一起放入列表条目中,使用如下HTML模板创建选择框条目:

<label class="item-input item-select">
    <any class="input-label"></any>
    <select>
        <option>...</option>
        <option>...</option>
        ...
    </select>
</label>

example;

<div class="scroll-content has-header">
		<div class="list">
			<label class="item item-input item-select">
				<div class="input-label">
					前端技术
				</div>
				<select>
					<option>HTML</option>
					<option selected>CSS</option>
					<option>JavaScript</option>
				</select>
			</label>
		</div>
	</div>
时间: 2024-08-27 16:39:58

ionic.css界面组件:表单-选择框的相关文章

表单选择框

实现要求:1.点击全选框,将所有的选择框选中 2.点击全不选框,将所有选中的选中框全部清除选中,处于没有选中的状态. 3.点击反选,将已经选中的框变为没有选中,将没有选中的框,变为选中. 要点: :checkbox 匹配所有复选框 attr('checked',true/false) HTML中基本框架: js 实现全选功能: $('#all').on('click',function(){ $('#checkbox>:checkbox').attr('checked',true); }); 实

jQuery学习笔记(四)——表单选择

一.表单选择 1.$('input[type=password][name=user]').val() 2.$(':password[name=user]').val() 二.表单过滤 1.$(':enabled') 选择可使用的元素 2.$(':disabled') 选择不可使用的元素 3.$(':cheched') 选择选定的单选和复选元素 4.$(':selected') 选择选定的下拉菜单的元素

使用fieldset标签结合CSS Lable实现表单的布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS表单</title> &

CSS自定义select下拉选择框的样式(不用其他标签模拟)

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5

.Net Core使用视图组件(ViewComponent)封装表单文本框控件

实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: 1 <form class="form-horizontal" role="form"> 2 <div class="row"> 3 <div class="form-group col-md-4"> 4 <label for

Chrome表单文本框自动填充黄色背景色样式

开发后台管理系统或 网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问 题,把之前查阅的一些资料和自己解决这个问题的方法纪录在此,一是为大家遇到此问题时提供一份资料,二是作为自己的笔记.过多的话就不多说了,下面进入正 题. 一.首先介绍一下我遇到这个问题时文本框的样式情况:  上图为Chrome浏览器为表单中的文本框自动填充黄色背景色的样子, 我自己为文本框加的,获得焦点后,周围有蓝色阴影. <input

Easyui表单,文本框,下拉菜单三级联动练习代码

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

Bootstrap--全局css样式之表单

单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. 1,内联表单 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件.只适用于视口(viewport

Bootstrap全局CSS样式之表单

.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%: .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时: .sr-only--将label标签隐藏: .help-block--用于设置提示文本: .form-horizontal--可以将label标签和控件组水平并排布局: .radio-inline..checkbox-inline-