任务事项清除效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:600&display=swap"); * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } body { font-family: 'Source Sans Pro', sans-serif; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin: 0; min-height: 100vh; } input[type="checkbox"] { position: relative; width: 1.5em; height: 1.5em; color: #363839; border: 1px solid #bdc1c6; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; cursor: pointer; -webkit-transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1); transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1); } input[type="checkbox"]::before { position: absolute; content: ''; display: block; top: 2px; left: 7px; width: 8px; height: 14px; border-style: solid; border-color: #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } input[type="checkbox"]:checked { color: #fff; border-color: #06842c; background: #06842c; } input[type="checkbox&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0