css-输入框和文本域样式调整

最新推荐文章于 2024-06-29 16:52:06 发布

零OO

最新推荐文章于 2024-06-29 16:52:06 发布

阅读量2.4k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_39111074/article/details/119888909

版权

前端专栏收录该内容

220 篇文章 8 订阅

订阅专栏

本文档展示了如何通过CSS样式去除HTML输入框和文本域选中后的边框变化以及文本域的右下角拖拽图样。通过设置`outline:none;`可以消除选中后的边框效果，而`resize:none;`则能禁止文本域的大小拖拽调整。这种方法有助于统一界面元素的视觉风格并防止意外的交互行为。

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

输入框去掉选中后的边框变化效果

选中后边框变化：

去掉变化效果方法：添加css属性- - - outline: none;

文本域去掉右下角拖拽图样

默认文本域右下角有个拖拽的图样，将鼠标移动到右下角可以进行拖拽实现放大缩小：
代码示例：

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        input {
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

页面效果：

而且选中后，边框也有变化效果：

边框变化效果跟上面输入框一样，加上css属性去除- - - outline: none;

边框拖拽效果的取消使用- - - resize: none;

代码示例：

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        input,
        textarea {
            outline: none;
        }
        
        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

页面效果：

注意小细节：

开头和结束标签写在一行，换行的话，鼠标选中文本框时，默认会停在非顶头的位置，如下：

零OO

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css-输入框和文本域样式调整

输入框去掉选中后的边框变化效果选中后边框变化：去掉变化效果方法：添加css属性- - - outline: none;文本域去掉右下角拖拽图样默认文本域右下角有个拖拽的图样，将鼠标移动到右下角可以进行拖拽实现放大缩小：代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫

专栏目录