`
rayln
  • 浏览: 430432 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS3的before, after和label的for用法

 
阅读更多
使用before和after可以用content, 结合before, after可做写入内容和样式

看例子: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.before{
		width: 100px;
		height:100px;
		border: 1px solid blue;
	}
	.before::before{
		content:'bef';
		width: 20px;
		height: 20px;
		background-color:red;
	}
	.before::after{
		content:'aft';
		width: 20px;
		height: 20px;
		background-color:blue;
	}
</style>
</head>
<body>
	<input id='input1' type='radio'/>
	<div class="before"></div>
	<label for='input1'>点击我</label>
	
</body>
</html>
分享到：
| ExtJs Ajax 同步问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS伪元素：after：before的特殊用法demo

    `:after`和`:before`伪元素在CSS3中被引入，它们分别在元素的内容之后和之前插入内容。通常，这些内容由`content`属性定义，可以是文本、图像或其他CSS生成的内容。让我们逐一深入探讨这些伪元素的特殊用法。 1. **...

    CSS3单选按钮和复选按钮特效.zip

    例如，使用`::before`和`::after`伪元素，配合`content`属性插入SVG图标，然后通过控制伪元素的样式实现图标的变化。 在"4280"这个文件中，可能包含了一个或者多个示例文件，展示如何将上述理论应用于实践。这些...

    css3制作checkbox单选按钮美化代码.zip

    一种常见方法是使用`::before`和`::after`伪元素，将复选框和单选按钮隐藏，然后创建自定义的图形表示。例如，我们可以创建一个方形或圆形的背景，并在选中时改变其状态。以下是一个简单的示例： ```css /* 隐藏...

    css3复选框收音机效果.zip

    这一效果主要通过改变复选框的伪元素（如`:before`和`:after`）和使用CSS3的属性来实现。 首先，我们关注的是HTML结构。在`index.html`文件中，你会看到一系列的`&lt;input&gt;`元素，它们是HTML5中的复选框，通常配合`...

    CSS3实现自定义复选框.zip

    CSS3提供了伪类和伪元素，如`:checked`、`:before`和`:after`，来改变元素在不同状态下的样式。例如，我们可以创建一个新的样式类，用于自定义复选框： ```css .custom-checkbox { display: none; /* 隐藏原始复选...

    纯CSS3实现P漂亮的复选框和单选按钮

    在CSS3中，我们可以通过设置`::before`和`::after`伪元素来改变这些元素的外观。例如，我们可以创建一个新的类，如`.custom-checkbox`和`.custom-radio`，并应用以下样式： ```css .custom-checkbox input[type=...

    css3 checkbox美化单选按钮和复选按钮美化样式

    使用`&lt;label&gt;`元素与`for`属性关联输入元素，以及合理设置`tabindex`属性，能帮助屏幕阅读器用户理解和操作按钮。 9. **复选框和单选按钮的组合**： 在需要一组互斥选项的场景中，我们可以使用单选按钮；当用户...

    CSS3立体感灯光开关按钮动画特效

    在本文中，我们将深入探讨如何使用CSS3技术创建具有立体感和动态灯光效果的开关按钮动画特效。这个特效可以通过自定义HTML中的checkbox样式实现，并在用户交互时改变页面背景色，模拟灯光的开闭效果。 首先，让我们...

    使用纯CSS美化radio和checkbox

    在网页设计中，radio（单选按钮）和...通过以上方法，我们可以使用纯CSS实现对radio和checkbox的美化，让网页的交互元素更加吸引人。在实际项目中，你可以根据提供的参考实例进行修改，以适应不同的主题和应用场景。

    CSS3自定义美化复选框Checkbox按钮样式代码

    本文将深入探讨如何使用CSS3自定义美化复选框（Checkbox）按钮的样式，以此来提升用户界面的美观度和交互体验。 复选框是HTML中的一个重要元素，通常用于提供多选选项。在默认情况下，浏览器会提供基本的样式，但...

    风格清新漂亮的CSS3开关按钮样式

    这些是用于添加特殊效果的关键工具，例如`:checked`伪类可以检测复选框的状态，`:before`和`:after`伪元素则可以在元素内容前后插入内容。在开关按钮的设计中，我们通常会利用这些特性来改变按钮开启和关闭时的视觉...

    CSS3美化复选框checkbox

    但是，我们可以通过使用`+`或`~`伪类选择器，结合`::before`和`::after`伪元素，以及一些CSS3的新属性（如`content`、`background`、`border`、`transition`等），来创建自定义的复选框样式。以下是一个简单的例子：...

    css3 iphone开关按钮 css3实现Icon UI图标代码下载.zip

    在本文中，我们将深入探讨如何使用CSS3来创建一个仿iPhone风格的开关按钮，并了解相关的前端技术，如HTML5、CSS、JavaScript和jQuery。这个压缩包文件提供了实现此类UI图标的代码示例，有助于开发者更好地理解和应用...

    css3单选框和复选框美化特效

    本教程将聚焦于一个常见的UI元素——单选框（radio button）和复选框（checkbox），并探讨如何使用CSS3来美化它们，实现一种简单而美观的打勾图标效果，而无需依赖任何外部插件。 首先，我们要知道在HTML中，单选框...

    css3开关按钮.zip

    【CSS3开关按钮】是一种在网页设计中广泛应用的交互元素，它通过利用CSS3的新特性，如伪类、过渡效果和边框半径等，来实现具有视觉吸引力且功能完善的开关按钮。这种按钮通常用于开启或关闭某个功能，如设置选项、...

    纯CSS3表单必填项选择_加强所需的表单字段

    对于复选框和单选按钮，我们可以使用`:before` 和 `:after` 伪元素来创建自定义的图标，结合`:checked`伪类改变选中状态的样式： ```css input[type="checkbox"] { visibility: hidden; /* 隐藏原生的复选框 */ } ...

    纯css3单选按钮和复选按钮样式代码

    在网页设计中，单选按钮（Radio Button）和复选框（Checkbox）是常见的用户交互元素，用于收集用户的选择信息。纯CSS3的单选按钮和复选...通过实践和实验，你可以掌握更多关于CSS3单选按钮和复选框样式的技巧和方法。

    css3单选按钮多选按钮

    我们可以使用`::before`和`::after`伪元素来添加自定义图标，或者改变边框和背景色来实现独特的设计。例如，为单选按钮添加一个自定义的选中状态： ```css input[type="radio"] { appearance: none; /* 移除默认...

Magicbox
Global site tag (gtag.js) - Google Analytics