美化表单元素

最新推荐文章于 2022-02-15 15:55:55 发布

Mr.Envelope?

最新推荐文章于 2022-02-15 15:55:55 发布

阅读量238

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/Mr_Envelope/article/details/102907411

版权

本文介绍了如何使用CSS的伪类如:focus和:checked来美化表单元素，特别是聚焦和选中状态的样式设置。同时，讲解了通过css属性resize控制textarea的调整尺寸以及如何设定文本框边缘到内容的距离，以及对单选和多选框样式的控制方法。

摘要由CSDN通过智能技术生成

美化表单元素

新的伪类

focus

元素聚焦时的样式

通常用于设置选中框


    <style>
        input:focus{
    
            outline: 2px #008c8c solid;
            outline-offset: 0px;;
            color: red;
        }
    </style>

    ... ...

    <p>
        <a tabindex="2" href="">Lorem.</a>
        <input tabindex="1" type="text">
        <button tabindex="3">提交</button>
    </p>