contenteditable修改边框样式

于 2023-06-14 11:00:54 发布
阅读量1k 收藏 1
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiruthika/article/details/131203676
版权 
[contenteditable] {
    outline: 1px solid transparent;
    border: 1px solid #fff;
    width: 100%;
}

[contenteditable]:focus {
    border: 1px solid #00c0ef;
    border-radius: 3px;
}
贝塔贝卡贝
关注
改变输入框光标颜色
weixin_43831534的博客
05-14 821
**一、caret-color 属性作用 caret-color : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色 caret 表示‘插入符号’,指处于内容可插入状态的光标 input{ color:blue; caret-color: red; } 1 2 3 4 caret-color 属性不仅对于原生的输入表单控件有效，设置contenteditable的普通标签也适用。 cont...
给盒子加contenteditable=“true“之后怎么改样式（继上篇div变textarea）
lqlq54321的博客
11-30 1749
修改placeholder的样式 .txt-word:empty:before { padding: 10px; box-sizing: border-box; content: attr(placeholder); font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; line-height: 22px; color: rgba(178, 178, 178, 1); } .tx
contenteditable获得焦点后的边框设置
weixin_33762321的博客
11-08 6367
[contenteditable]:focus{outline:none;} 转载于:https://blog.51cto.com/chcchb/1979986
替代textarea的contenteditable样式
weixin_36944932的博客
02-09 1889
<textarea name="" id="" cols="30" rows="10"></textarea> <div style="width: 400px;height: 400px;border:1px solid #dbdbdb;" contenteditable="true"></
CSS - 开启 contenteditable 属性时，去掉点击编辑时显示的 “黑边框“（完美解决方案）
王佳斌
04-02 3182
contenteditable获得焦点后的边框设置，css如何去掉contenteditable属性的边框，vue怎么去掉contenteditable 属性边框，contenteditable 属性开启后点击有边框，删掉css contenteditable 属性的边框，css取消可输入标签聚焦时contenteditable的边框，contenteditable属性编辑器在手机看，获得焦点会有一个框outline没效果，怎么去掉？如何删除聚焦的 contenteditable pre 周围的边框？css
vue实现带样式的textarea输入框，contenteditable属性应用
weixin_44434938的博客
02-10 4931
vue实现带样式的textarea输入框，contenteditable属性应用
textarea 聚焦后边框_实现"输入框"获得焦点时外边框变蓝
weixin_42464967的博客
12-24 2969
背景之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。浏览器自动会给输入框input、textarea的outline 属性设置一个默认值，效果就是当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消...
利用vue自定义指令实现输入框聚焦时改变其父元素的样式（验证码输入框）
qq_41836598的博客
08-27 1613
需求 聚焦时 div嵌套： 点击输入框1时，父组件2 的边框发生改变。 实现（以图片验证码为例） HTML部分 <div class="login_code" for="input"> <input type="text" maxlength="6" v-model="captchaValue" placeholder="请输入图片验证" v-code> ...
div可输入文字原理边框
06-09
div元素的可输入文字原理主要是通过设置`contenteditable`属性来实现的。...你可以根据需要修改这些属性值，来改变div元素边框的样式和颜色。同时，你也可以使用其他CSS属性来构造自己想要的样式。
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } </style> </head> <body> <table> <colgroup> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 5px;"> <col style="width: 50px;"> <col style="width: 1000px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 100px;"> <col style="width: 50px;"> </colgroup> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </thead> <tbody> <tr> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td contenteditable="true">Particle</td> </tr> </tbody> </table> </body> </html>这个代码内为什么无法调整列宽
最新发布
07-17
更改为： ```css table { border-collapse: separate; width: 100%; } ``` 这样，你的列宽设置将生效，并且可以调整列宽。 请注意，还有其他因素可能导致列宽无法调整，如其他CSS样式或JavaScript代码的干扰。...
Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
止于至善
12-27 1721
在react中是关键字，不能使用，只能用替代；添加允许子节点修改或复制；contenteditable 获得焦点后的边框设置 {outline: 0px solid transparent;}；此处只是实现了一个简单的富文本编辑器，其他功能可以根据此基础添加，比如字号，颜色，背景色等。
contenteditable属性设置div可编辑
weixin_38673922的博客
01-11 584
<div contenteditable=true style="width: 300px;height:150px;border:1px solid black;"></div>
contenteditable="true"元素过滤富文本样式
金大光
08-21 3492
用contenteditable=”true”模拟输入框时，会发生连带样式一起复制到输入框的事情。
css设置input框或者contentEditable为true的不显示焦点的样式
rock_23的博客
04-16 578
/ 设置获取焦点情况下边框为无。
取消可输入标签聚焦时contenteditable的边框
zuo-yiran的博客
02-21 8618
把普通标签改为可输入的标签时添加contenteditable=”true”即可实现输入功能，但是进行输入时会有边框出现，如： 想要去掉的话只需给标签加上 outline: none；即可
随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试...
09-09 658
　　记录一些小零碎知识点，以便日后查看~ 1、随机撒花特效 　　教师节快到了，公司的产品提出一个需求：在IM（即时聊天）聊天界面弹出教师节的祝福“广告”，用户点击“发送祝福”按钮，聊天界面会随机撒花。这里的重点是随机撒花，下面会附上随机撒花的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//...
禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode
sohighthesky的专栏
06-20 5836
大家都知道，Webkit系列浏览器（Safari、Chrome）的textarea的默认效果和其它浏览器不一样，比如，textarea可拖动调整大小，聚焦（onfocus）时边框变成黄色。这些效果的确很酷，但我们有时候不需要这些效果，那怎么办呢？其实用CSS轻松取消这些效果。 1. 取消拖动调整大小 textarea { resize: none; }2. 聚焦时边框颜色不变 textarea:focus { outline: none; } http://luolon
html5 富文本样式,科技常识：html5中contenteditable属性如果过滤标签 过滤富文本样式...
weixin_42632434的博客
06-11 635
今天小编跟大家讲解下有关html5中contenteditable属性如果过滤标签 过滤富文本样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5中contenteditable属性如果过滤标签 过滤富文本样式 的相关资料，希望小伙伴们看了有所帮助。​​在div中使用contenteditable=”true”可以达到模拟输入框的效果 但是当我们复制其他网页内容进去的时候 会...
使用contenteditable=“true“改造div可编辑文本框
yaoqiuquan的博客
05-24 1543
contenteditable=“true” 可编辑 contenteditable=“false” 禁止编辑 contenteditable=“plaintext-only” 可以让编辑区域只能键入纯文本 不建议使用兼容性不好一：简单版 使用例子 二：升级版（可插入图片或者粘贴图片） 使用例子： 显示结果：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值