去除谷歌浏览器input及textarea表单边框特效

最新推荐文章于 2022-12-03 14:53:31 发布
最新推荐文章于 2022-12-03 14:53:31 发布
阅读量410 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WWWHPUZH/article/details/84596649
版权

谷歌浏览器Chrome基于WebKit开源浏览器引擎，自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后，大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的，但是当网站本身就已经对于表单样式有一定的设计时，这种默认表单样式就会让人觉得套样了！这里我们介绍下如何去掉Chrome谷歌浏览器默认的input、textarea的边框(border)和背景(background) 及Chrome下不可更改textarea大小。

可以用下面的css代码去掉所有元素的边框，

01
*:focus { outline : none ;}

用下面的代码去掉你要去掉的元素的边框，

01
.nohighlight:focus { outline : none ; }

你也可以给元素增加你希望的边框，

01
.changeborder:focus { outline :Blue Solid 4px ; }
 

去除更多浏览器默认样式，请参考http://beyondweb.cn/article_detail.php?id=345

海角七号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧，敲击讨厌滴啦，怎么去掉介个样式尼
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-26 5203
input{ box-shadow: inset 0 0 0 1000px white!important;//覆盖见鬼了的谷歌输入框样式 }
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
09-05
在网页设计和开发中，Chrome 浏览器的某些默认行为可能会对页面的视觉效果产生影响，其中之一就是当用户点击 `input[type="text"]` 输入框或 `textarea` 时，它们会显示一个黄色的边框，这被称为聚焦边框。这种边框...
取消input、textarea选中后的默认边框样式
热门推荐
草巾冒小子的博客
07-05 1万+
禁用输入框、文本框轮廓线：outline属性 某些浏览器下，输入框即使被设置了圆角，边框的矩形轮廓仍然可见。 例如，谷歌浏览器，严重影响页面显示效果。 截图如下： 此时，我们就要禁用input、textarea的边框属性。代码如下： input{outline: none;} textarea{outline: none;} 设置了边框属性为none ，就不...
如何解决谷歌浏览器中的边框线问题
u010158775的专栏
07-18 5733
textarea在谷歌浏览器下，当点击输入的时候，会出现个边框，针对出问题，以下解决方法： outline: none; //有时候谷歌默认情况下不是None,所以我们在写样式的时候需要声明一下
（谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】...
bacongti2381的博客
07-08 759
问题：在使用谷歌浏览器，360浏览器时，点击input输入框会出现带颜色的外边框，如下图所示： 解决办法：很简单，就是在css样式中增加一个outline:medium; 转载于:https://www.cnblogs.com/wenzheshen/p/5652508.html...
chrome浏览器去除蓝色边框和黄色背景色
ly的博客
09-22 7606
文本框出现这两种情况真是很糟心 1、在使用chrome浏览器时,选中文本框后会出现蓝色边框，导致页面很不好看   如何去掉呢？          直接给文本框添加这个样式属性就可以解决问题了：outline:none; 2、chrome浏览器会自动记录搜过的关键字，在你下次点击文本框准备输入的时候会以下拉框的形式列出搜索过的关键词，当你点选列
jQuery表单元素选择器代码实例
10-20
首先，`:input`选择器是一个非常实用的选择器，它能够一次性选取所有表单元素，包括`<input>`、`<textarea>`、`<select>`和`<button>`。在给出的代码示例中，`$(':input')`被用来选取页面中所有的表单控件，并将它们...
jQuery表单选择器用法详解
10-16
例如，将所有按钮元素添加一个特定的CSS类，或者改变所有禁用元素的边框颜色，都可以通过上述选择器轻松实现。 通过了解和熟练掌握这些jQuery表单选择器，开发者能够更高效地处理网页中的表单交互，提升用户体验，...
实验三HTML表格与HTML表单优质资料.doc
12-02
form 标记用于定义表单，input 标记用于定义表单中的输入框，textarea 标记用于定义表单中的文本框，select 标记用于定义表单中的下拉列表框。 掌握 HTML 表单的作用是非常重要的。HTML 表单可以用于收集用户输入的...
网页设计-表格、表单及框架.ppt
12-23
表单（未在内容中详细展开）是网页上收集用户信息的重要组件，通常由`<form>`标签、输入字段（如`<input>`、`<textarea>`）、选择列表（`<select>`）、按钮（`<button>`）等组成。通过表单，用户可以输入数据并提交...
CSS样式去除input和textarea点击选中框
01-19
取消input和textarea的聚焦边框： 复制代码代码如下: input{outline:none} 取消textarea可拖动放大： 复制代码代码如下: textarea{resize:none}
控制textarea文本长度,并限制输入字数(带统计显示)的特效(二)
w_gaoping的博客
04-06 551
        控制textarea文本长度,并限制输入字数(带统计显示)的特效   效果示例如下:   特效代码如下(提示用popHint): &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt...
Vue3：elementplus输入框去掉边框及缩放
海风依旧
12-03 1万+
有时候需要在一些特定的位置比如表格内放输入框，但是表格有框，输入框也有框，便变得不美观，所以就有了如下的需求，需求：element输入框去掉边框，并且不能进行缩放，即没有输入框右下角的小三角
selenium-设置chrome浏览器无界面模式
车陂IT仔
04-08 6402
# 导入包 from selenium.webdriver.chrome.options import Options # 设置chrome浏览器无界面模式 chrome_options.add_argument('--headless') browser = webdriver.Chrome(chrome_options=self.chrome_options) # 无界面模式下默认不是全...
去除chrome谷歌浏览器input自带边框
{玖}单纯着，幸福着，思考着
02-21 1958
  chrome谷歌浏览器input会自带边框，这个很讨厌，你可以更改这个边框样式，也可以直接出去掉 这里我们介绍一个去除chrome谷歌浏览器input自带边框样式的方法 在css中加入代码：   1 input,button,select,textarea{outline:none} 2 textarea{resize:none} ...
div模拟实现textarea效果
liya_nan的博客
08-16 3464
效果展示： 代码实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;div实现textarea效果&lt;/title&gt; &lt;style&gt; #textarea { height: 200px; width: 300px; ...
除去google浏览器input框聚焦时的边框
方糖的博客
10-29 2429
谷歌浏览器的默认input框聚焦时会有一个蓝色的边框，怎么去掉呢？ outline: none; input:focus{ outline: none; }
h5 input 阴影_html5中input表单加边框,阴影效果
weixin_29166013的博客
12-23 261
CSS:input:focus{border-color:#00CC99;}获取焦点时改变颜色focus能同时改变宽度长度背景色…….form,p(margin-bottom:30px;margin-left:20px;).shadow,.one,.two,.three,.four,.five,.six(height:50px;width:280px;border:1pxsolid#CCC;...
解决textarea打印问题
大海无量的博客
06-20 2937
参考链接：https://blog.csdn.net/vuturn/article/details/50176439//textarea原样输出 var work_jingli=datas[i].jingli; //var reg=new RegExp("&lt;br&gt;","g"); // work_jingli= work_jingli.replace(reg,"\r\n"); work_...
<div id="main"> <h1>异常记录登记</h1> <form method="post" action="/submit"> <label>确认线别：</label> <input type="text" name="line"> <label>确认日期：</label> <input type="date" name="date"> <label>异常机种：</label> <input type="text" name="model"> <label>异常现象：</label> <textarea name="issue"></textarea> <label>生产日期：</label> <input type="date" name="prod_date"> <label>生产班别：</label> <input type="text" name="shift"> <label>生产线别：</label> <input type="text" name="prod_line"> <label>责任人：</label> <input type="text" name="responsible"> <input type="submit" value="提交"> </form> </div>請你幫我修改這個 #main { flex: 3; max-width: 80%; margin: 50px 0 50px 20px; padding: 20px; background-color: #fff; }
最新发布
06-10
好的，根据您的需求，我帮您修改如下： ``` #main { ...其中包括了一些常用的表单样式，如 input 的圆角和边框，textarea 的高度设置，以及提交按钮的样式等。希望这个修改后的样式能够满足您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值