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

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

xlx0403

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

阅读量837

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xlx0403/article/details/82849660

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

input { outline:none }；

或者 input:foucus{outline:none }；

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xlx0403

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

陈杉菜

10-19

2967

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

重学前端详解表单 / 详解input / 浏览器私有前缀的作用（第六天）

全网同名：PBitW！可以去掘金关注我！

07-24

1473

form表单 action method name label（标记）神奇的input input源css（及type=text）浏览器前缀 writing-mode（文本在水平或垂直方向上的排布）【对于input】 sideways-lr sideways-rl 2020/8/13补（对于可换行元素）： text-rendering（定义浏览器引擎如何渲染字体） -internal-light-dark【未解决】 letter-spacing（字符间距） word-spacing （字间隔） lett

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

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输入框默认出现的边框

weixin_34232363的博客

12-19

1889

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

去掉input在iphone出现默认边框

weixin_33811961的博客

02-12

711

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

html去除input标签默认边框

qq_43378240的博客

12-09

6355

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

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

Practice makes perfect

10-25

610

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

CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

热门推荐

杜永康的博客

11-26

1万+

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

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

彭世瑜的博客

06-28

5421

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

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

Benjamin——前端攻城师

08-15

5994

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

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

ganle的博客

01-13

2963

一、去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

2960

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

input框内默认文字点击消失

weixin_30706507的博客

12-06

533

<!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标签的默认样式

m0_60237095的博客

03-22

1273

如何去除input标签的默认样式

37 边框简写属性 1 边框的默认值2 border 边框的简写

09-26

240

1 2 转载于:https://www.cnblogs.com/anvivi/p/9708364.html

html的边框样式的默认值是什么,我的css框架——base.css(重设浏览器默认样式)

weixin_33526828的博客

06-18

323

复制代码代码如下:@charset "utf-8";/*@名称: base@功能: 重设浏览器默认样式*//* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */html {color:black;background:white;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre...