开发常用CSS大总结

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

placeholder 输入提示设置

-webkit-input-placeholder

:-webkit-input-placeholder {
	/* WebKit browsers */
	font-size: 20px;
	color: red;
}
:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	font-size: 20px;
	color: red;
}
::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	font-size: 20px;
	color: red;
}
:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	font-size: 20px;
	color: red;
}

css 单行、多行文本省略号

• 单行文本省略号: text-overflow: ellipsis + white-space: nowrap
• 多行省略: -webkit-line-clamp + display: -webkit-box

//单行省略
.ellipsis {
	width: 200px; /*必须是固定宽度值*/
	overflow: hidden; /*超出部分隐藏*/
	text-overflow: ellipsis; /*超出部分显示省略号*/
	white-space: nowrap; /*规定段落中的文本不进行换行 */
}

//多行省略
.ellipsis-more {
	width: 200px; /*必须是固定宽度值*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden; /*超出部分隐藏*/
}

注：

1. 将 height 设置为 line-height 的整数倍，防止超出的文字露出。
2. 给 p::after 添加渐变背景可避免文字只显示一半。
3. 由于 ie6-7 不显示 content 内容，所以要添加标签兼容 ie6-7（如：…）；兼容 ie8 需要将::after 替换成:after。

图文不可选择

设置user-select为none

.not-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

css -表单验证

pointer-events更像是 JavaScript，它能够：阻止用户的点击动作产生任何效果;阻止缺省鼠标指针的显示;阻止 CSS 里的 hover 和 active 状态的变化触发事件;阻止 JavaScript 点击动作触发的事件。

• auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。
• none：表示在元素上禁用指针事件；此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。
• inherit：表示该元素将从其父级继承其 pointer-events 值。

<section class="container">
	<input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required /><br />
	<input type="text" name="smscode" placeholder="请输入验证码" pattern="\d{4}" required /><br />
	<button type="submit"></button>
</section>

input {
	// 验证通过时按钮的样式
	&:valid {
		& ~ button {
			pointer-events: all;
			cursor: pointer;
			&::after {
				content: '提交👍';
			}
		}
	}

	// 验证不通过时按钮的样式
	&:invalid {
		& ~ button {
			pointer-events: none; // 去除点击事件，让按钮无法点击
			&::after {
				content: '未通过验证😒';
			}
		}
	}
}