css实现中性化表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现中性化表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;500;900&display=swap"); :root { font-family: "Noto Sans", sans-serif; } *, *:before, *:after { box-sizing: border-box; transition: 0.3s ease; } input { all: unset; border: none; border-radius: 0.3em; padding: 0.3em 0.8em; background-color: transparent; box-shadow: -0.2em -0.15em 0.2em 0 rgba(187, 178, 172, 0.5), 0.2em 0.15em 0.2em 0 rgba(255, 255, 255, 0.5); } :is([type="button"], [type="submit"], [type="reset"]):not(:active) { box-shadow: -0.2em -0.15em 0.2em 0 rgba(255, 255, 255, 0.5), 0.2em 0.15em 0.2em 0 rgba(187, 178, 172, 0.5); } [type=range] { box-shadow: none; } ::-moz-range-track { box-shadow: -0.2em -0.15em 0.2em 0 rgba(187, 178, 172, 0.5), 0.2em 0.15em 0.2em 0 rgba(255, 255, 255, 0.5); height: 0.5em; } ::-webkit-slider-runnable-track { box-shadow: -0.2em -0.15em 0.2em 0 rgba(187, 178, 172, 0.5), 0.2em 0.15em 0.2em 0 rgba(255, 255, 255, 0.5); height: 0.5em; } input[type=range]::-webkit-slider-thumb { cursor: pointer; border: none; border-radius: 100vmax; -webkit-appearance: none; height: 1.5em; width: 1.5em; margin-top: -0.5em; background-color: #e9e6e4; box-shadow: -0.2em -0.15em 0.2em 0 rgba(255, 255, 255, 0.5), 0.2em 0.15em 0.2em 0 rgba(187, 178, 172, 0.5); transition: 0.2s ease; } ::-moz-range-thumb { cursor: pointer; border: none; border-radius: 100vmax; -webkit-appearance: none; height: 1.5em; width: 1.5em; margin-top: -0.5em; background-color: #e9e6e4; box-shadow: -0.2em -0.15em 0.2em 0 rgba(255, 255, 255, 0.5), 0.2em 0.15em 0.2em 0 rgba(187, 178, 172, 0.5); transition: 0.2s ease; } ::-webkit-slider-runnable-track { background: transparent; } input[type=range]:active::-webkit-slider-thumb { background-color: rgba(23, 69, 159, 0.2); } input[type=range]:active::-moz-range-thumb { background-color: rgba(23, 69, 159, 0.2); } input:is([type="checkbox"], [type="radio"]) { display: none; } input:is([type="checkbox"], [type="radio"]) + label { position: relative; padding: 1em; display: grid; grid-template-columns: auto 1fr; align-items: center; font-weight: 500; transition: 0.4s ease; color: rgba(18, 20, 24, 0.5); } input:is([type="checkbox"], [type="radio"]) + label:before { transition: 0.4s ease; content: " "; border-radius: 100vmax; display: inline-grid; place-content: center; margin-right: 1em; width: 2em; height: 2em; box-shadow: -0.5em -0.25em 0.5em 0 white, 0.5em 0.25em 1.25em 0 #bbb2ac; background-color: #ebe9e7; cursor: pointer; text-indent: 0; } input[type=checkbox] + label:before { border-radius: 0.8em; } input:checked + label { font-weight: 500; color: #17459f; text-indent: 0.5em; } [type=checkbox]:checked + label:before { content: "✔"; } [type=radio]:checked + label:before { content: "✧"; } :is([type="checkbox"], [type="radio"]):checked + label:before { color: rgba(23, 69, 159, 0.5); box-shadow: -0.5em -0.25em 0.5em 0 white, 0.5em 0.25em 1.25em 0 #bbb2ac, 0.1em 0.1em 0 rgba(187, 178, 172, 0.5) inset, 0.2em 0.2em 0 rgba(210, 204, 200, 0.5) inset, 0.1em 0.1em 0 rgba(255, 255, 255, 0.5) inset, -0.2em -0.2em 0 rgba(255, 255, 255, 0.5) inset; } fieldset { border: 0.1em solid #e9e6e4; border-radius: 0.7em; padding: 4em 2em 2em; box-shadow: -0.25em -0.2em 0.5em 0 rgba(255, 255, 255, 0.8) inset, 0.25em 0.2em 0.5em 0 rgba(187, 178, 172, 0.8) inset; } legend { translate: 0 2.5em; } .btngroup legend { display: none; } .btngroup { box-shadow: none; padding-top: 1em; } /* layout */ h1 { background-color: #e9e6e4; color: #9daf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0