当前位置: 首页 > 未分类>阅读正文

input-rounded CSS样式

2022.7.3 朱丰华 135 次 留下评论 1765字

编写一个 input-rounded 样式。

实例如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input圆角边框类</title>
    <style>
        input.input-rounded {
            /* Font & Text */
            font-family: sans-serif;
            font-size: 16px;
            font-style: normal;
            font-variant: normal;
            font-weight: 100;
            letter-spacing: 0.16px;
            line-height: normal;
            text-decoration: none solid rgb(119, 119, 119);
            text-align: start;
            text-indent: 0px;
            text-transform: none;
            vertical-align: middle;
            white-space: normal;
            word-spacing: 0px;

            /* Color & Background */
            background-attachment: scroll;
            background-color: rgb(255, 255, 255);
            background-image: none;
            background-position: 0% 0%;
            background-repeat: repeat;
            color: rgb(119, 119, 119);

            /* Box */
            height: 39px;
            width: 196px;
            border: 1px solid #ccc;
            margin: 0px;
            padding: 8px 16px;
            max-height: none;
            min-height: 0px;
            max-width: none;
            min-width: 0px;

            /* Positioning */
            position: static;
            top: auto;
            bottom: auto;
            right: auto;
            left: auto;
            float: none;
            display: inline-block;
            clear: none;
            z-index: auto;

            /* List */
            list-style-image: none;
            list-style-type: disc;
            list-style-position: outside;

            /* Table */
            border-collapse: separate;
            border-spacing: 0px 0px;
            caption-side: top;
            empty-cells: show;
            table-layout: auto;

            /* Miscellaneous */
            overflow: visible;
            cursor: text;
            visibility: visible;

            /* Effects */
            transform: none;
            transition: all 0s ease 0s;
            outline-offset: 0px;
            box-sizing: border-box;
            resize: none;
            text-shadow: none;
            text-overflow: clip;
            word-wrap: normal;
            box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px inset;
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
        }

        input.input-rounded:focus {
            outline: solid 1px rgb(18, 159, 234);
        }
    </style>
</head>

<body>
    <h1>input圆角边框类!</h1>
    <input type="text" class="input-rounded" />
    <input type="text" class="input-rounded" />
</body>

</html>

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注