为input边框添加圆角

最新推荐文章于 2024-04-24 17:04:10 发布

ゞ﹏铭 (り

最新推荐文章于 2024-04-24 17:04:10 发布

阅读量9.9k

点赞数 16

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

本文链接：https://blog.youkuaiyun.com/qq_43620423/article/details/104152167

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用HTML的input标签创建输入框，并通过CSS3的border-radius属性设置边框圆角。同时，文章还讨论了如何取消input标签的边框和点击时的高亮颜色，以及利用text-indent调整光标缩进，以实现更美观的输入框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、input标签

input 标签可以为 html 网页添加一个输入框

<input type="text">
<style>
    input {
        width: 300px;
        height: 30px;
    }
</style>

在这里插入图片描述

2、border-radius属性

border-radius可以改变边框的变圆程度

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
    }
</style>

在这里插入图片描述

3、取消input标签的边框及点击时的高亮颜色

border: none; 可以取消元素的边框

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
    }
</style>

在这里插入图片描述

outline: none; 可以取消元素被点击时显示的高亮颜色
在这里插入图片描述

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
        outline: none;
    }
</style>

在这里插入图片描述

4、改变光标缩进
text-indent可以改变input标签的光标缩进

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
        outline: none;
        text-indent: 1em;
    }
</style>

在这里插入图片描述