input 点击时去掉默认外边框和清除默认值

最新推荐文章于 2024-04-30 21:44:36 发布

原创最新推荐文章于 2024-04-30 21:44:36 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了如何使用CSS去除输入框的默认聚焦轮廓，并通过JavaScript实现输入框聚焦时清除预设值及失去焦点时恢复预设值的功能，确保用户体验的一致性和美观性。

<style>

input { outline:none }；

或者 input:foucus{outline:none }；

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xlx0403

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS - 去除 input 框默认样式

🏆 前端领域优质创作者

05-11

4197

前言大部分情况下，我们都会自定义 input 框样式，而默认的边框及样式非常简陋。变为如下图所示，干净的样式：实现代码 input{ background:none; outline:none; border:none; } /* 如果input必须要有边框，但需要去掉选中时的蓝色框 ↓↓↓ */ input{ background:none; outline:none; border:1px solid #ccc; } input:focus{ bo

Web开发： Input Range 默认样式修改

陈杉菜

10-19

3022

不正经的分享经验引入呈现结果代码（js/css/html）叽叽喳喳引入缘由来自于web开发课上的一个作业，但，看起来并没有实际的关联，我寻思金老师也不会因为我做了这个滑块而高看我多少，毕竟这真的就是有手就行。而且退一万步说，如果我要是真的写不出来的话，大可以把这个type改成text，去掉花里胡哨然后返璞归真，直接让用户手动输入就完事了，反正用户也是我自己orz，主要还是自己像这样，来自个人奇奇怪怪的不服气。作业截图???? 以上全部的话以及这篇博客的由来统统起源于第二点，让用户选择（或输入）图片

参与评论您还未登录，请先登录后发表或查看评论

去除点击input输入框默认出现的边框

weixin_34232363的博客

12-19

1899

html代码 <input class="input" type="text" placeholder="写点什么吧！"> 复制代码加入以下css代码即可 .input{ outline: none; } 复制代码

IE6/7下多种方法移除button、input 默认边框和去掉焦点线

12-11

一、去掉边框：看看基本的HTML：复制代码代码如下: <div class=”wrap”> <input type=”text” class=”input_txt”> <input type=”submit” value=”submit” class=”input_btn”> <input type=”button” value=”提交” class=”input_btn”> <div> 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。实现方式一：设置CSS：复制代码

去掉input在iphone出现默认边框

weixin_33811961的博客

02-12

722

2019独角兽企业重金招聘Python工程师标准>>> ...

取消input、textarea选中后的默认边框样式

最新发布

2302_77099705的博客

04-30

1351

如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

前端知识之css

prigilm的博客

11-03

476

CSS 文章目录CSS一、CSS介绍二、CSS语法1、注释2、CSS样式组成三、CSS三种引入方式四、CSS选择器1、基本选择器2、组合选择器3、属性选择器4、分组和嵌套5. 伪类选择器6. 伪元素选择器7. 选择器优先级8. 总结五. CSS继承1. 什么是继承?六. CSS常用属性1. 宽和高2. 字体属性3. 文字属性4. 背景属性5. display属性六. CSS盒子模型1. margin外边距2. border边框3. padding内填充4、总结七. 使网页中的元素产生阴影八. 清除某些HTM

【HTML+CSS】4.CSS布局：盒模型和定位

M&Q的博客

04-14

2024

之前讲到，样式是CSS语法的最小单元，每一个样式都由选择器和声明（规则）两部分组成，而声明又由属性和属性值组成。上一篇讲了选择器，这里就开始进入“属性”部分了。要想灵活应用CSS设计出美观且多样的页面，就需要熟悉CSS的各类“属性”，CSS中包含超过100种属性，包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者，我觉得我们应该循序渐进，先集中熟悉最常用...

html去除input标签默认边框

qq_43378240的博客

12-09

6409

input表单点击会出现一个默认边框，设置border: none;或者border: 0;都没有效果，还是会有默认边框，怎么去除呢 css设置这个input的outline: none; 就可以了

取消input默认边框样式、以及图片如何实现16:9比例

Practice makes perfect

10-25

627

1.取消input默认边框 .iborder{ width:65%; height:2rem; border-radius: 10px; padding-left:1rem; background:none; outline:none; //取消input框默认样式 } 2.通过CSS来实现16:9比例通过百分比设置宽度，根...

input输入时的边框样式去除

杜永康的博客

11-26

1万+

很多程序员在写项目过程中，会遇到input的边框样式去除问题。今天我们就研究一下，有什么办法解决这个问题？一般的，我们会给input设置：这种方法，我们去除的是显示样式，但是输入的时候，我们需要点击一下input框，发现还是有一个黑色的初始化边框：这种情况，怎么处理？去除文本输入框的样式：去除密码输入框的样式：简而言之，type=input的哪种类型，就去除哪种样式最后的效果如下：到这，我们遇到的问题已经得到了解决，但是学习这种事，要举一反三，更要善于总结，要深挖。你说呢？

css：去除input和textarea默认边框样式并美化

彭世瑜的博客

06-28

5733

同样参考element-ui的css，可以实现如下效果。参考element-ui的css，可以实现如下效果。textarea默认样式和focus样式。input默认样式和focus样式。/* 鼠标hover *//* 鼠标hover *//* 去除默认样式 *//* 去除默认样式 *//* 自定义样式 *//* 自定义样式 *//* 提示文字 *//* 获得焦点 *//* 提示文字 *//* 获得焦点 */

IE6/7下移除button、input 默认边框和去掉焦点线

Benjamin——前端攻城师

08-15

6029

一、去掉边框：看看基本的HTML：通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。实现方式一：设置CSS： input{margin:0;padding:0;} .wrap{background-color:#0f0;} .input_

input去除蓝色边框

weixin_46449470的博客

06-28

800

input标签在使用的时候会有边框样式。当input聚焦的时候又会显示出一个蓝色边框。很多时候我们并不需要这种默认样式的边框，就需要去除边框。给需要去除的标签添加css样式： border: none; 去除input默认的边框 outline:none; 去除聚焦时的蓝色边框 outline-width:0 去除聚焦时的蓝色边框或者直接 input:focus { outline: none; }去除所有input的聚焦边框 <!DOCTYPE html> <html lan

input去除默认值和下拉提示框

ganle的博客

01-13

3074

一、去input除默认值： <input type="text" id="inputId" name="inputName" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" /> 二、去除input下拉提示框 <form autocomplete="...

前端使用css去除input框的默认样式

m0_72929120的博客

01-23

3113

【代码】前端使用css去除input框的默认样式。

input框内默认文字点击消失

weixin_30706507的博客

12-06

549

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...

input点击时去掉边框

05-30

你可以使用CSS的outline属性来去掉input元素的边框，在输入框获得焦点时，outline设置为none即可。比如，你可以这样写： ``` input:focus { outline: none; } ``` 这样就可以在输入框获得焦点时去掉边框了。