css美化radio实现开关式点击效果代码

代码语言:html

所属分类:表单美化

代码描述:css美化radio标签实现开关式点击切换按钮状态机文字显示效果代码

代码标签: radio 开关 美化

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  <style>
  @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
	body,html {
	height:100%;
	display:grid
}
body {
	font-family:"Montserrat",sans-serif
}
form {
	margin:auto;
	display:flex;
	flex-direction:column;
	position:relative;
	padding-left:10rem
}
form:before {
	content:"";
	display:block;
	position:absolute;
	width:7.5rem;
	height:100%;
	border-radius:99em;
	left:0;
	top:50%;
	border:.5rem solid #ccc;
	transform:translatey(-50%)
}
input {
	clip:rect(0 0 0 0);
	clip-path:inset(100%);
	height:1px;
	overflow:hidden;
	position:absol.........完整代码请登录后点击上方下载按钮下载查看

网友评论0