input/textarea 输入框点击有边框解决方法

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量2.7k 收藏
点赞数 1
分类专栏： 工作踩坑日记 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Depressiom/article/details/128531204
版权

input/textarea 输入框点击出现类似以下的默认边框

默认边框

第一种方法(直接添加样式)

 input{
   outline: none;
 }

第二种方法（控制聚焦时不出现边框）

input:focus{
   outline: none;
 }
Depressiom
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html输入框点击边框颜色不变,css--处理输入框后颜色问题
weixin_39636164的博客
06-05 3050
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:#ededed!important;-webkit-box-shadow:000px1000pxtransparentinset!important;background-col...
鼠标点击＜input＞输入框后边框发生颜色变化
qingdouxiaohua的博客
09-22 1619
鼠标点击输入框后颜色发生改变。
input输入框设置样式
weixin_52597660的博客
06-07 392
【代码】input输入框设置样式。
css input,textarea 输入框光标颜色修改
weixin_44609842的博客
12-27 538
input, textarea { caret-color:#FFA800; }
【鸿蒙软件开发】文本输入（TextInput/TextArea）
m0_62599305的博客
10-23 6481
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法参考TextInput、TextArea。TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本'})placeholder参数可以设置提示文本。
关于去除easy ui 的input textarea 等输入框点击有蓝色框框
qq_33232235的博客
07-20 1752
easyui 的编辑框点击都有的默认的蓝色框，去除的话只需要将其style的outline:none;
input、textarea输入框去除默认样式内阴影
qq_39750019的博客
06-17 431
问题描述 在 ios 系统中，输入框都有内阴影，需要去除。 解决方案 -webkit-appearance: none ; //是为了去除内阴影样式，但是缺点是不可输入； -webkit-user-select: auto; // 解决输入问题；
input、textarea输入框锁定，以及input框类型
一代的博客
01-09 2116
可输入状态： <input> <textarea></textarea>//默认状态下都可以输入数据 锁定状态： <input readonly="readonly"> <textarea readonly="readonly"></textarea>//锁定状态都只需要加readonly属性 type=“text”输...
input和TEXTAREA 输入框在ie9 中删除和剪切无效 的解决办法
qq_36508160的博客
10-30 678
       今天在测试项目时, 发现input输入框在 ie9下 输入数据查询后,  删除数据再查询, 查询的还是未删除的数据, input没有更新删除后的数据,      无奈的我去网上找了下, 发现很多人也有同样的问题, 经过踩坑,成功解决bug, 下面把解决的方案发给大家:      1. 原生js写法:  (function (d) { if (navigator.user...
input或textarea 去掉边框
qq_34631220的博客
04-16 2202
textarea { border: 0; outline: none; background-color: rgba(0, 0, 0, 0);// 透明背景 } input{ border: 0; outline: none; background-color: rgba(0, 0, 0, 0);// 透明背景 }
Element Input输入框的使用方法
10-15
本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model` 双向绑定数据，`placeholder` 设置占位文本。例如： ```html <el-input v-model=...
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
12-01
在Chrome浏览器中，当用户聚焦到`input[type="text"]`输入框或`textarea`多行文本框时，浏览器会自动添加一个黄色的边框来提示用户当前元素处于焦点状态。然而，在某些情况下，这种默认的黄色边框可能与网页的设计...
Element Input组件分析小结
12-10
总结起来，Element Input组件的calcTextareaHeight.js主要用于处理textarea的高度自适应问题，通过对目标textarea的样式分析和模拟计算，实现了高度的动态调整，使得输入框在用户输入时始终保持合适的内容展示。...
jQuery输入框创建标签代码
06-24
本文将详细讲解如何利用jQuery实现输入框...以上就是使用jQuery实现输入框创建标签功能的基本方法和可能的扩展。这个功能常用于论坛、社交媒体或任何需要用户输入标签的场景，提高了用户体验并方便数据的组织和检索。
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 981
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 288
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 245
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 295
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
uniapp input输入框直接点击发送按钮后隐藏怎么还显示一个空白是边框，点键盘确认之后再点发送就正常怎办
05-23
这个问题可能是由于键盘弹起时导致输入框被顶起，但是键盘隐藏时输入框没有重新布局，导致留下了一个空白的边框。为了解决这个问题，你可以尝试以下几个方法： 1. 使用 `@focus` 和 `@blur` 事件来监听输入框的焦点状态，当输入框失去焦点时重新布局输入框，例如： ```html <template> <div> <textarea ref="input" v-model="message" @focus="onFocus" @blur="onBlur"></textarea> <button @click="sendMessage">发送</button> </div> </template> <script> export default { data() { return { message: '', originalHeight: 0 // 记录输入框的原始高度 } }, methods: { onFocus() { this.originalHeight = this.$refs.input.clientHeight }, onBlur() { this.$refs.input.style.height = this.originalHeight + 'px' }, sendMessage() { // 发送消息 } } } </script> <style scoped> textarea { box-sizing: border-box; width: 100%; border: 1px solid #ccc; padding: 10px; font-size: 16px; line-height: 1.5; resize: none; } </style> ``` 2. 使用 `uni.hideKeyboard()` 方法来隐藏键盘，并在隐藏键盘后重新布局输入框，例如： ```html <template> <div> <textarea ref="input" v-model="message" @keydown.enter="onEnter"></textarea> <button @click="sendMessage">发送</button> </div> </template> <script> export default { data() { return { message: '', originalHeight: 0 // 记录输入框的原始高度 } }, methods: { onEnter() { uni.hideKeyboard({ complete: () => { this.$refs.input.style.height = this.originalHeight + 'px' } }) }, sendMessage() { // 发送消息 } } } </script> <style scoped> textarea { box-sizing: border-box; width: 100%; border: 1px solid #ccc; padding: 10px; font-size: 16px; line-height: 1.5; resize: none; } </style> ``` 以上两种方法都可以解决输入框隐藏后留下空白边框的问题，你可以根据自己的需求选择其中一种实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值