您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现iOS风格打开关闭选择框功能CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2023-10-17 346人已围观

简介 这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1 效果

演示地址： https://www.albertyy.com/2020/7/check2.html 

另一篇文章：https://www.jb51.net/css/735639.html

2 知识点

2.1

在html中，

关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当

中时，就需要使用form属性来指定所属表单；

2.2 CSS float 属性

float属性指定一个盒子（元素）是否应该浮动。

属性值:

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。

元素怎样浮动:

元素在水平方向浮动，即元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

清除浮动 - 使用 clear：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

注意： 绝对定位的元素忽略float属性！

2.3 CSS3 :checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

2.4 CSS element+element 选择器

element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

例如：选择所有紧接着

元素之后的第一个

元素:

 div+p{ background-color:yellow; }

3 代码实现

  •  默认关闭 
  •  默认打开 
  •  不可用

到此这篇关于纯CSS实现iOS风格打开关闭选择框的文章就介绍到这了,更多相关css ios 打开关闭选择框内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：纯CSS实现自定义单选框和复选框功能HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 CSS自定义绿色复选框按钮样式使用CSS实现页面复选框的方法

下一篇：纯Css实现Div高度根据自适应宽度（百分比）调整css和css3弹性盒模型实现元素宽度（高度）自适应css 高度自适应的问题示例探讨CSS min-height IE6、IE7、FF下DIV自适应高度纯CSS无hacks的跨游览器自适应高度多列布局 推荐css textarea 高度自适应,无滚动条CSS解决未知高度的垂直水平居中自适应问题CSS 实现高度自适应铺满整屏的实现

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网