vue实现一个form表单效果代码
代码语言:html
所属分类:表单美化
代码描述:vue实现一个form表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <title>CodePen - Vue Contact Form</title> <link rel="canonical" href="https://codepen.io/netzzwerg/pen/VQKBPQ" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400"); *, *::after, *::before { box-sizing: border-box; } body { color: #fff; background: #949c4e; background: linear-gradient( 115deg, rgba(86, 216, 228, 1) 10%, rgba(159, 1, 234, 1) 90% ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, .container { min-height: 100vh; } .center { display: flex; justify-content: center; align-items: center; } a { color: #2c3e50; text-decoration: none; } header { position: relative; height: 150px; padding-top: 100px; } header h1 { text-align: center; font-size: 2.4rem; font-weight: 300; } #app { display: flex; } .vue-form { font-size: 16px; width: 500px; padding: 15px 30px; border-radius: 4px; margin: 50px auto; width: 500px; background-color: #fff; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3); } .vue-form fieldset { margin: 24px 0 0 0; } .vue-form legend { padding-bottom: 10px; border-bottom: 1px solid #ecf0f1; } .vue-form div { position: relative; margin: 20px 0; } .vue-form h4, .vue-form .label { color: #94aab0; margin-bottom: 10px; } .vue-form .label { display: block; } .vue-form input, .vue-form textarea, .vue-form select, .vue-form label { color: #2b3e51; } .vue-form input[type="text"], .vue-form input[type="email"], .vue-form textarea, .vue-form select, .vue-form legend { display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .vue-form input[type="text"], .vue-form input[type="email"], .vue-form textarea, .vue-form select { padding: 12px; border: 1px solid #cfd9db; background-color: #ffffff; border-radius: 0.25em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); } .vue-form input[type="text"]:focus, .vue-form input[type="email"]:focus, .vue-form textarea:focus, .vue-form select:focus { outline: none; border-color: #2c3e50; box-shadow: 0 0 5px rgba(44, 151, 222, 0.2); } .vue-form .select { position: relative; } .vue-form .select::after { content: ""; position: absolute; z-index: 1; right: 16px; top: 50%; margin-top: -8px; display: block; width: 16px; height: 16px; background: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpolygon%20fill%3D%22%232c3e50%22%20points%3D%220.9%2C5.5%203.1%2C3.4%208%2C8.3%2012.9%2C3.4%2015.1%2C5.5%208%2C12.6%20%09%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E") no-repeat center center; pointer-events: none; } .vue-form select { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: pointer; } .vue-form select::-ms-expand { display: none; } .vue-form .vue-form-list { margin-top: 16px; } .vue-form .vue-form-list::after { clear: both; content: ""; display: table; } .vue-form .vue-form-list li { display: inline-block; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 26px 16px 0; float: left; } .vue-form input[type="radio"], .vue-form input[type="checkbox"] { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; opacity: 0; z-index: 2; } .vue-form input[type="radio"] + label, .vue-form input[type="checkbox"] + label { padding-left: 24px; } .vue-form input[type="radio"] + label::before, .vue-form input[type="radio"] + label::after, .vue-form input[type="checkbox"] + label::before, .vue-form input[type="checkbox"] + label::after { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -8px; width: 16px; height: 16px; } .vue-form input[type="radio"] + label::before, .vue-form input[type="checkbox"] + label::before { border: 1px solid #cfd9db; background: #ffffff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); } .vue-form input[type="radio"] + label::before, .vue-form input[type="radio"] + label::after { border-radius: 50%; } .vue-form input[type="checkbox"] + label::before, .vue-form input[type="checkbox"] + label::after { border-radius: 0.25em; } .vue-form input[type="radio"] + label::after, .vue-form input[type="checkbox"] + label::after { background-color: #2c3e50; background-position: center center; background-repeat: no-repeat; box-shadow: 0 0 5px rgba(44, 151, 222, 0.4); display: none; } .vue-form input[type="radio"] + label::after { background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%0D%0A%3C%2Fsvg%3E"); } .vue-form input[type="checkbox"] + label::after { background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0