点击input时，不显示边框！

最新推荐文章于 2024-06-03 15:09:24 发布
最新推荐文章于 2024-06-03 15:09:24 发布
阅读量1.3w 收藏 23
点赞数 9
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45718618/article/details/119545582
版权
点击input时，不显示边框！① input{ outline: none; }②:focus 伪类选择器① input{ outline: none; }   鼠标点击input时，出显的黑色边框，怎么去除的问题？input{ outline: none; }  可以给边框（border）设置一个颜色，然后把边框轮廓(outline)给去掉，点击的时候就不会出现黑色的边框了，outline设置轮廓的样式，样式是 none时，轮廓不会出现，希望对大家有帮助！②:focus 伪类选择器  像这种
摘要由CSDN通过智能技术生成

点击input时，不显示边框！

① input{ outline: none; }

   鼠标点击input时，出显的黑色边框，怎么去除的问题？

input{ outline: none; }

  可以给边框（border）设置一个颜色，然后把边框轮廓(outline)给去掉，点击的时候就不会出现黑色的边框了，outline设置轮廓的样式，样式是 none时，轮廓不会出现，希望对大家有帮助！

②:focus 伪类选择器

  像这种问题一般都用在 :focus 伪类选择器 ，用于选取获得焦点的表单元素，焦点也即是光标。
  一般情况下 input 类表单元素才能获取:focus伪类选择器。废话不多少上代码 ，在input:focus 中，点击去除input 显示的边框，如下：（图片可以忽略）

.

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

<head>
    <meta
最低0.47元/天 解锁文章
つ 派小星
关注
  • 9
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
input标签不显示边框，或只在点击时不显示边框
qq_45863496的博客
11-11 4484
input标签不显示边框(1)不显示边框(2)只在点击时不显示边框 (1)不显示边框 在样式中直接写：border-style: none; .search-input-box { width: 1040px; height: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight:
无边框input
汤一飞
08-31 280
input { border:none; outline:medium; }
如何去掉el-input自带边框
最新发布
qq_38210427的博客
06-03 558
【代码】如何去掉el-input自带边框。
点击input时，去除边框
qq_37037988的博客
02-03 2412
点击input时，去除边框
INPUT标签无边框
jajavaja的专栏
05-09 3015
style="background-color:transparent;"
ivew input 去除边框 和 点击时不出现边框
qq_30832781的博客
09-07 439
问题描述： ivew input 去除边框 和 点击时不出现边框 新建一个class <Input class="test" ..../> 新建一个标签 不带 scoped <style lang="less"> .test{ .ivu-input { border:0px; -- 不出现边框 border-bottom: 1px solid #d2d2d2 !important; bo
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
08-31
这行代码的作用是，当`input`元素获得焦点（即被点击）时，不显示任何轮廓（outline）。`outline: none`将移除所有轮廓，从而达到隐藏边框颜色的效果。 2. **修改边框颜色** 如果不是想要隐藏边框，而是希望改变...
layui radio点击事件实现input显示和隐藏的例子
10-16
今天小编就为大家分享一篇layui radio点击事件实现input显示和隐藏的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap布局中input输入框右侧图标点击功能
09-02
同时，我们为这个元素设置了`cursor: pointer`，使得鼠标悬停时显示手型，提示用户可以点击。 接下来，我们需要为这个覆盖层添加点击事件监听器，例如使用jQuery： ```javascript $(document).ready(function() { ...
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
09-05
在网页设计和开发中，Chrome 浏览器的某些默认行为可能会对页面的视觉效果产生影响，其中之一就是当用户点击 `input[type="text"]` 输入框或 `textarea` 时，它们会显示一个黄色的边框，这被称为聚焦边框。这种边框...
css设置input框没有边框，选中时取消背景色
weixin_33831196的博客
07-12 1109
1 input { 2 outline:none; 3 background:transparent; 4 border:none; 5 outline:medium; 6 } 7 *:focus { 8 outline: none; 9 ...
让input输入框选中时没有选中的边框
Yxd0724的博客
09-01 814
outline:none // 也可以把none设置为其他的颜色，选中时的外边框颜色。
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
weixin_44166849的博客
12-13 720
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
input 不显示边框_不需要使用JavaScript
weixin_39713805的博客
11-29 461
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！谢谢你点开来阅读，小郑希望您阅读完有所获。先解释一下标题的歧义，之所以叫不需要使用JavaScript的意思不是让你放弃它，更不是说有个横空出世的脚本可以替换它。说的是前端在处理交互的时候，好多场景是可以不用JavaScript干预的。而直接借助标签特性，CSS属性特点，选择器灵活应用就能很好的完成一个你所需要的交互效果。这里会...
HTML中input设置为无边框与轮廓的样式
qq_61738972的博客
06-01 1273
自己在设计前端页面的时候发现输入框都是带有边框的，想要设计的简约一点，看到网上一些输入框以一条横线的方式展示，成功get到了我的点。2.去除轮廓，并且设置一个下边框，使它以一条横线展示。
input无边框之众说纷纭
lcczzu的专栏
06-26 525
一、 在ie6使用 border:none;是无效的，应该使用border:0; 不要聚焦后显示的边框，使用outline:none 二、 无边框 js:document.getElementById('version').style.border='1px solid' 有边框，一定要有solid属性，。 有边框，与上面的有些不同
input，去掉点击时的边框
anye_zhuzai的博客
03-07 1526
设立边框后点击时出现另一种颜色的边框怎么办？直接给input添加样式。
input输入框边框设置不显示
热门推荐
weixin_44311876的博客
04-19 1万+
最近在写项目时，做到搜索框时，需要将input的默认边框清除，我的处理是border：none。在测试时发现input框出现了默认边框样式。 问题： 设置input边框不显示，将border设置为none，页面显示没有边框，但是点击输入时会有默认边框显示。 方法：在设置input边框为none的前提下，再添加outline：none属性，即可清除默认的border样式。 ...
input输入时的边框样式去除
杜永康的博客
11-26 1万+
很多程序员在写项目过程中，会遇到input的边框样式去除问题。今天我们就研究一下，有什么办法解决这个问题？一般的，我们会给input设置： 这种方法，我们去除的是显示样式，但是输入的时候，我们需要点击一下input框，发现还是有一个黑色的初始化边框：这种情况，怎么处理？去除文本输入框的样式： 去除密码输入框的样式： 简而言之，type=input的哪种类型，就去除哪种样式最后的效果如下：到这，我们遇到的问题已经得到了解决，但是学习这种事，要举一反三，更要善于总结，要深挖。你说呢？
修改代码让点击提交按钮时输入内容不合法时在输入框显示红色边框
05-25
假设你的提交按钮是一个 `button` 元素，输入框是一个 `input` 元素，可以通过以下代码实现输入内容不合法时在输入框显示红色边框： ```html <input id="myInput" type="text"> <button id="submitBtn">提交</button> <script> const inputEl = document.getElementById('myInput'); const submitBtnEl = document.getElementById('submitBtn'); submitBtnEl.addEventListener('click', () => { const inputValue = inputEl.value; if (inputValue.trim().length === 0) { // 检查输入是否为空或者纯空格 inputEl.style.border = '1px solid red'; // 设置红色边框 } else { // 如果输入合法，清除红色边框 inputEl.style.border = 'none'; // TODO: 提交表单或执行其他操作 } }); </script> ``` 这段代码首先获取了输入框和提交按钮的元素，并为提交按钮添加了一个 `click` 事件监听器。当用户点击按钮时，会获取输入框的值，并检查其是否为空或者纯空格。如果输入不合法，就设置输入框的红色边框；否则，清除红色边框并执行提交操作。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

つ 派小星

你的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值