原生CSS input样式美化

原创已于 2022-02-15 16:58:41 修改 · 6.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2022-02-15 14:10:39 首次发布

H5 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何通过CSS样式优雅地定制input元素，包括边框、圆角、聚焦效果和阴影，提升用户体验。

原生input框美化

input {
    outline-style: none;
    border: 1px solid #c0c4cc;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: 0;
    padding: 10px 15px;
    box-sizing: border-box;
    font-family: "Microsoft soft";
    &:focus {
        border-color: #f07b00;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px
                rgba(0, 0, 0, 0.075),
            #f07b00;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
            #f07b00;
    }
}