前端——一个好看的文本框

最新推荐文章于 2024-05-16 13:41:41 发布

qqqweiweiqq

最新推荐文章于 2024-05-16 13:41:41 发布

阅读量723

点赞数

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/qqqweiweiqq/article/details/128141493

版权

前端专栏收录该内容

52 篇文章 0 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

body {
    font: 1em sans-serif;
    padding: 0;
    margin : 0;
}

form {
    max-width: 200px;
    margin: 0;
    padding: 0 5px;
}

p > label {
    display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
    /* 需要在基于 WebKit 的浏览器上对表单元素进行恰当的样式设置 */
    -webkit-appearance: none;

    width : 100%;
    border: 1px solid #333;
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input:invalid {
    box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
    outline: none;
}

html文本

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple DOM example</title>

    <!--    <

了解本专栏