自定义 checkbox, radio 样式
来源:互联网 发布:单片机入门教程 编辑:程序博客网 时间:2024/05/21 14:27
- 深入了解html label标签
- 了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置
- 了解CSS中常见的雪碧图,并能自己制作使用雪碧图
Label
The HTML
<label>
element represents a caption for an item in a user
interface.
label可以帮助添加结构和增加表单的可用性和可访问性,用来在每个表单元素中添加有意义的描述性标签,增加了表单对于使用辅助设备的用户的易用性。
Usage notes
A
<label>
can be associated with a control either by placing the control element inside the<label>
element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they’re associated.
隐式使用
Simple label example
<label>Click me <input type="text"></label>
显示使用
Using the “for” attribute
<label for="username">Click me</label><input type="text" id="username">
Attributes: for
html 中 label 的基本知识
background-position
Summary
The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.
Syntax
/* Keyword values */background-position: top;background-position: bottom;background-position: left;background-position: right;background-position: center;/* <percentage> values */background-position: 25% 75%;/* <length> values */background-position: 0 0;background-position: 1cm 2cm;background-position: 10ch 8em;/* Multiple values */background-position: 0 0, center;/* Global values */background-position: inherit;background-position: initial;background-position: unset;
Formal syntax
<position>#where <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]where <length-percentage> = <length> | <percentage>
CodePen for background-position
背景图片定位相关知识
:check css 预处理
The :checked CSS pseudo-class selector represents any radio (<input type="radio">
), checkbox (<input type="checkbox">
) or option (<option>
in a <select>
) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked
pseudo-class no longer applies to this element, but will to the relevant one.
Examples
/* any "checkable" element */:checked { width: 50px; height: 50px;}/* only radio elements */input[type="radio"]:checked { margin-left: 25px;}/* only checkbox elements */input[type="checkbox"]:checked { display: none; }/* only option elements */option:checked { color: red;}
input[type=”radio”]:checked
Represents all radio buttons on the page that are checked
input[type=”checkbox”]:checked
Represents all checkboxes on the page that are checked
option:checked
Represents all select’s options on the page that are selected
了解input的:checked伪类的基本知识以及应用场景
::before(:before)
Summary
::before
creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.
HTML content
<q>Some quotes</q>, he said, <q>are better than none</q>.
CSS content
q::before { content: "«"; color: blue;}q::after { content: "»"; color: red;}
CodePen for ::before
了解input的:before伪元素的基本知识
::after (:after)
Summary
The CSS ::after
pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
Syntax
/* CSS3 syntax */::after { style properties }/* CSS2 syntax */:after { style properties }
了解input的:after伪元素的基本知识
CSS 伪元素 伪类 解析
- CSS 伪类用于向某些选择器添加特殊的效果。
- CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素和伪类容易混淆,是因为效果类似且写法相仿, css3 为了区分两者,明确规定了两者的表现方法。
:Pseudo-classes::Pseudo-elements
“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。”
引用自 StephenLee
- 自定义 checkbox, radio 样式
- 自定义checkbox和radio样式
- 实现自定义checkbox、radio样式
- html自定义radio checkbox样式
- 自定义radio与checkbox的样式
- ife系列之自定义checkbox、radio样式
- 自定义checkbox和radio的样式
- 更改checkbox默认样式、radio默认样式,CSS实现自定义
- radio与checkbox样式
- radio、checkbox样式修改
- angular 结合 css 用图片自定义radio及checkbox样式
- 纯css自定义radio,checkbox样式,提高用户体验
- 自定义checkbox,radio,select
- input checkbox radio样式改变
- html修改radio、checkbox样式
- 自定义单选框、多选框、下拉框样式,结合原生checkbox,radio,select更改样式
- 自定义radio单选组样式
- 最简单清晰的纯css实现的单选框radio复选框checkbox自定义样式
- 白话Lucene和solr的区别是什么?(二)
- iOS中的函数式编程和链式编程
- ogg-00685 在RAC ONE NODE和RAC 丢失某节点的情况下的处理方法
- 关于SQL注入应该注意的几个点
- vs2015编译libcurl库7.52.1
- 自定义 checkbox, radio 样式
- 番茄告诉你--是什么使你无法完成工作?
- Linux内核源代码中的C语言代码(Linux内核源代码情景分析读书笔记连载)
- 网络名词汇总
- 真假vmlinux--由vmlinux.bin揭开的秘密
- unix 中 ps -ef命令详解
- 击中与击不中变换
- 北京阿凡达雪景
- Android 自定义onDraw剖析