中性表单元素效果
代码语言:html
所属分类:表单美化
代码描述:中性表单元素效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500&display=swap'> <style> /* === COLOURS & VARIABLES === */ :root { --primary: #ff7025; --background: #e0e5ec; } /* === SHADOWS === */ /* === SETUP === */ *, *::before, *::after { box-sizing: border-box; font-weight: 400; } @media screen and (prefers-reduced-motion: reduce) { *, *::before, *::after { -webkit-transition: none !important; transition: none !important; } } ::-moz-selection { text-shadow: none; color: #fff; background-color: #f8b639; } ::selection { text-shadow: none; color: #fff; background-color: #f8b639; } html { box-sizing: inherit; } body { background: #e0e5ec; color: #9baacf; padding: 2rem; font-family: "Baloo Thambi 2", cursive !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.5rem; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; gap: 1rem; } body > p { margin: 0; } button { color: inherit; } a { color: inherit; -webkit-transition: all 260ms ease; transition: all 260ms ease; } a:hover, a:focus { color: #ff7025; } svg { height: 100%; width: 100%; fill: currentColor; pointer-events: none; } h1 { font-weight: 500; font-size: 4rem; margin: 0; text-align: center; } blockquote { text-align: center; } h2 { font-weight: 500; font-size: 2.5rem; margin: 0; } /* === TEXT MODIFIERS === */ .emboss { background: #fff; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(0, 0, 0, 0.25) 1px 2px 1px; } .engrave { background: #b1b1b1; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.5) 1px 2px 1px; } .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } /* === SHADOW TYPES ===*/ .shadow--outset, .shadow--raised, .shadow--inset, .shadow--sunken, .shadow--ridge { padding: 1rem 3rem; border-radius: 1.2rem; background: #e0e5ec; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .shadow--outset { box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .shadow--raised { box-shadow: inset 0.2rem 0.2rem 0.5rem #fff, inset -0.2rem -0.2rem 0.5rem rgba(195, 193, 198, 0.9), 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .shadow--inset { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff; } .shadow--sunken { box-shadow: -0.3rem -0.3rem 0.5rem rgba(195, 193, 198, 0.9), 0.2rem 0.2rem 0.4rem #fff; } .shadow--ridge { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff, 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } /* === CONTAINERS === */ section { width: 100%; padding: 1rem 1rem 2rem 1rem; border-radius: 1.2rem; background: #e0e5ec; box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; gap: 2rem; } section > div { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; gap: 2rem; -webkit-box-pack: center; justify-content: center; } /* === BUTTONS === */ .button { cursor: pointer; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; border: none; border-radius: 1.2rem; padding: 1rem 3rem; -webkit-transition: all 260ms ease; transition: all 260ms ease; text-decoration: none; font-family: inherit; color: #9baacf; background: #e0e5ec; box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .button:hover, .button:focus { color: #ff7025; } .button:active { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff; } .button--raised { box-shadow: inset 0.2rem 0.2rem 0.5rem #fff, inset -0.2rem -0.2rem 0.5rem rgba(195, 193, 198, 0.9), 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .button--pill { border-radius: 2.4rem; } .button--primary { color: #e0e5ec; background: #ff7025; box-shadow: inset 0.2rem 0.2rem 0.5rem #f8b639, inset -0.2rem -0.2rem 0.5rem #ff4c00, 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .button--primary:hover, .button--primary:focus { color: #fff; } .button--primary:active { box-shadow: inset 0.2rem 0.2rem 0.5rem #ff4c00, inset -0.2rem -0.2rem 0.5rem #f8b639; } .button--round, .button--square { border-radius: 50%; height: 4rem; width: 4rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 0; box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .button--round .button__icon, .button--square .button__icon { height: 2rem; width: 2rem; } .button--square { border-radius: 1.2rem; } .button--pin { border-radius: 50%; height: 2rem; width: 2rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 0; } .button--pin .button__icon { height: 1.8rem; width: 1.8rem; } /* === TEXT FIELD === */ .textfield { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: start; align-items: flex-start; gap: 0.3rem; } .textfield span { font-size: 1.2rem; } .textfield div { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff; background: #e0e5ec; border: none; border-radius: 1.2rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: 0.5rem 1rem; } .textfield div .textfield__icon { margin-right: 0.5rem; } .textfield div input { background: transparent; border: none; color: #9baacf; } .textfield div input::-webkit-input-placeholder { color: #c3c1c6; } .textfield div input::-moz-placeholder { color: #c3c1c6; } .textfield div input:-ms-input-placeholder { color: #c3c1c6; } .textfield div input::-ms-input-placeholder { color: #c3c1c6; } .textfield div input::placeholder { color: #c3c1c6; } .textfield div:focus-within { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff, 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .textfield div:focus-within .textfield__icon { color: #ff7025; } /* === CHECKBOX === */ .checkbox { cursor: pointer; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; font-size: 1.2rem; gap: 0.3rem; } .checkbox:hover .checkbox__input ~ .checkbox__checkmark::after { border-color: #ff7025; } .checkbox__input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; } .checkbox__input:checked ~ .checkbox__checkmark, .checkbox__input:checked:hover ~ .checkbox__checkmark { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff; } .checkbox__input:checked ~ .checkbox__checkmark::after, .checkbox__input:checked:hover ~ .checkbox__checkmark::after { border-color: #ff7025; } .checkbox__input:focus ~ .checkbox__checkmark::after { border-color: #ff7025; } .checkbox__checkmark { -webkit-box-align: center; align-items: center; background-color: #e0e5ec; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; height: 2.8rem; width: 2.8rem; -webkit-transition: all 260ms ease; transition: all 260ms ease; border-radius: 0.6rem; box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .checkbox__checkmark::after { border: solid #b1b1b1; border-width: 0 3px 3px 0; content: ""; height: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 25%; -webkit-transition: all 260ms ease; transition: all 260ms ease; } /* === RADIO === */ .radio { cursor: pointer; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; font-size: 1.2rem; gap: 0.3rem; } .radio:hover .radio__input ~ .radio__checkmark::after { background-color: #ff7025; } .radio__input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; } .radio__input:checked ~ .radio__checkmark, .radio__input:checked:hover ~ .radio__checkmark { box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff; } .radio__input:checked ~ .radio__checkmark::after, .radio__input:checked:hover ~ .radio__checkmark::after { background-color: #ff7025; } .radio__input:focus ~ .radio__checkmark::after { background-color: #ff7025; } .radio__checkmark { -webkit-box-align: center; align-items: center; background-color: #e0e5ec; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; height: 2rem; width: 2rem; -webkit-transition: all 260ms ease; transition: all 260ms ease; border-radius: 50%; box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .radio__checkmark::after { background-color: #b1b1b1; border-radius: 50%; content: ""; height: 50%; width: 50%; -webkit-transition: all 260ms ease; transition: all 260ms ease; } /* === SWITCH === */ .switch { position: relative; display: inline-block; width: 4rem; height: 2.2rem; } .switch__input { opacity: 0; width: 0; height: 0; } .switch__input:checked + .switch__slider { background: #ff7025; box-shadow: inset 0.2rem 0.2rem 0.5rem #f8b639, inset -0.2rem -0.2rem 0.5rem #ff4c00, 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; } .switch__input:checked + .switch__slider::before { -webkit-transform: translate(calc(100% - 0.25rem), -50%); transform: translate(calc(100% - 0.25rem), -50%); } .switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e0e5ec; box-shadow: inset 0.2rem 0.2rem 0.5rem #fff, inset -0.2rem -0.2rem 0.5rem rgba(195, 193, 198, 0.9), 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 1.2rem; } .switch__slider::before { position: absolute; content: ""; height: 1.8rem; width: 1.8rem; left: 0.25rem; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); background: #e0e5ec; box-shadow: inset 0.2rem.........完整代码请登录后点击上方下载按钮下载查看
网友评论0