点击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_37037988的博客
02-03 2415
点击input时，去除边框
文本框默认提示灰色，点击后输入黑色
amber_tear的专栏
06-29 8193
在前台页面应用中，我们在登录窗口等text框中，常常会碰到点击效果的的实现。下面实现的方式很简单也是比较常用的 * 默认灰色，点击后输入黑色。             输入框效果实现                         例如：在jsp页面中我这样使用    value="用户名/邮箱/手机"    onclick="javascript:if
如何去掉el-input自带边框
最新发布
qq_38210427的博客
06-03 563
【代码】如何去掉el-input自带边框。
input点击黑色
LuLu_111的博客
07-24 101
input点击黑色
input标签不显示边框，或只在点击时不显示边框
qq_45863496的博客
11-11 4485
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 281
input { border:none; outline:medium; }
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
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,显示瞬间的边框颜色,对之修改与隐藏实例
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` 时，它们会显示一个黄色的边框，这被称为聚焦边框。这种边框...
让input输入框选中时没有选中的边框
Yxd0724的博客
09-01 815
outline:none // 也可以把none设置为其他的颜色，选中时的外边框颜色。
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
weixin_44166849的博客
12-13 722
element plus中 input框的边框线去除并且鼠标滑过或点击选中都没有边框
input 不显示边框_不需要使用JavaScript
weixin_39713805的博客
11-29 462
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！谢谢你点开来阅读，小郑希望您阅读完有所获。先解释一下标题的歧义，之所以叫不需要使用JavaScript的意思不是让你放弃它，更不是说有个横空出世的脚本可以替换它。说的是前端在处理交互的时候，好多场景是可以不用JavaScript干预的。而直接借助标签特性，CSS属性特点，选择器灵活应用就能很好的完成一个你所需要的交互效果。这里会...
HTML中input设置为无边框与轮廓的样式
qq_61738972的博客
06-01 1277
自己在设计前端页面的时候发现输入框都是带有边框的，想要设计的简约一点，看到网上一些输入框以一条横线的方式展示，成功get到了我的点。2.去除轮廓，并且设置一个下边框，使它以一条横线展示。
input无边框之众说纷纭
lcczzu的专栏
06-26 526
一、 在ie6使用 border:none;是无效的，应该使用border:0; 不要聚焦后显示的边框，使用outline:none 二、 无边框 js:document.getElementById('version').style.border='1px solid' 有边框，一定要有solid属性，。 有边框，与上面的有些不同
input，去掉点击时的边框
anye_zhuzai的博客
03-07 1529
设立边框后点击时出现另一种颜色的边框怎么办？直接给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、付费专栏及课程。

余额充值