css实现input 输入框背景透明源码

最新推荐文章于 2024-04-22 22:27:44 发布
最新推荐文章于 2024-04-22 22:27:44 发布
阅读量1.9k 收藏 5
点赞数
分类专栏： HTML CSS 文章标签： css html input 输入框 透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11613/article/details/82440295
版权
HTML 同时被 2 个专栏收录
25 篇文章 0 订阅
订阅专栏
CSS
20 篇文章 0 订阅
订阅专栏

为了让带背景颜色的表单页面更美观，有时候需要把input 输入框设置成透明的背景，实现这种效果，需要在input 添加输入框属性:"background-color:transparent"
<input style="background-color:transparent" type="text" name="name"> (有边框)
<input style="background-color:transparent; border-width:1;"> (细边框)
<input   style="background-color:   transparent;   border:   0px"> (无边框)

 

 

 

本篇文章来源于 我爱编程网 ：http://www.bcw52.com/Article/2014.html

iteye_11613
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html透明文本框
05-04
就是一个简单的html网页制作，css的设置而已，简单的几句话而已 修改文本框格式，以表现的更为友好 该资源并没收取资源分 所以没什么不值得所言
css3发蓝光的input输入框样式
06-04
本文将深入探讨如何使用CSS3创建“发蓝光”的input输入框样式，以及与之相关的JS特效。 首先，让我们了解CSS3中的关键元素在实现这种效果中的作用。一个发光的input输入框样式通常涉及到以下几个方面： 1. **边框*...
【CSS】写一个原生的透明 input 标签输入框
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
05-22 510
【代码】【CSS】写一个原生的透明 input 标签输入框。
el-input背景设置为透明色 elementUi Plus
最新发布
weixin_42678822的博客
04-22 1153
【代码】el-input背景设置为透明色 elementUi Plus。
input设置背景透明
热门推荐
黄彪博客
09-07 1万+
文章摘抄 http://blog.sina.com.cn/s/blog_45cfbac80100ngkd.html http://www.w3school.com.cn/cssref/pr_background-color.asp        定义和用法 background-color 属性设置元素的背景颜色。   元素背景的范围 background-colo
input输入框的透明效果
weixin_34406086的博客
11-05 4455
2019独角兽企业重金招聘Python工程师标准>>> ...
文本框透明CSS样式
翔的窝窝
05-08 2678
 样式表:.byte {...}{ BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WI
jQuery+css3实现的input输入框粒子动画特效源码.zip
11-17
在本资源中，我们主要探讨的是如何利用jQuery和...以上就是关于“jQuery+css3实现的input输入框粒子动画特效源码”的主要知识点，通过这个项目，开发者可以学习到如何利用这两种技术来提升网站的交互性和视觉吸引力。
纯css实现输入框placeholder动效及输入校验
11-21
借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下： :placeholder-shown兼容性 直接上代码！:smiling_face_selector: 源码 html: <...
input输入框蓝光特效源码
11-18
这是一款基于CSS3实现的input输入框蓝光特效源码，是一款CSS3 transition过渡制作发蓝光的input输入框样式代码。当输入框获得焦点时可呈现出发光的特效。是一款非常优秀的特效源码。建议用户使用支持CSS3的火狐或...
HTML+CSS+JavaScript实现登录注册源码
05-31
本资源提供了使用这三种技术实现的登录注册源码，对于初学者或希望提升前端技能的开发者来说，这是一个非常实用的学习材料。下面将详细阐述这些技术在登录注册系统中的应用。 首先，HTML（HyperText Markup ...
input框背景设置透明
qq_36880129的博客
11-25 5813
input框背景设置透明 background:rgba(255,255,255,0.15) 设置opacity会将整个元素透明，包含input里面的内容显示
el-input背景设置为透明色
你的小可爱的博客~
05-30 1995
【代码】el-input背景设置为透明色。
html+css 之 文本框透明…
huanshiwushuang的博客
04-14 3267
今天写网页，和同学一起做项目---------》创青春 为了使得首页的搜索框，能够变得透明，，网上找了许久，， 只找到一个办法--------->给文本框加上  background:transparent; 这个属性和值。 但是 IE9 不兼容，出现无法编辑文本框的现象。 SO -----》我去群里问了一下，终找到解决的办法 background:rgba(0,0,0,0);------->说明
Struts2标签 %{ } %{# }
laravel framework
04-20 122
struts2中的标签     s:a            中的href 什么时候使用“# ” 什么时候该用“%{ }”  什么时候该用“%{# }” 什么时候用“”     s:select      中的list 什么时候使用“# ” 什么时候该用“%{ }”  什么时候该用“%{# }” 什么时候用“”     s:if          中的test 什么时候使用“# ” 什么时候该...
CSS 实现父组件半透明，子组件不透明
Lhy_JL的博客
06-11 446
父组件半透明，子组件不透明，达到部分组件高亮的效果； 应用场景：  当 input 输入框获取焦点的时候，给 body 添加半透明效果，input 组件不透明； 举例子：（ 应用到CSS3的rgba属性） background: #rgba(88, 88, 88, 0.3); ...
css半透明遮罩层 ie8,遮罩层在ie8下的input还是可操作，怎么解决？[已解决]
weixin_39533174的博客
08-04 150
遮罩层在ie8下的input还是可操作，怎么解决？求教把background: rgba(0, 0, 0, 0.5); /* browsers */filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c5c5c5c', endColorstr='#4c5c5c5c'); /* IE *...
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
upward
09-20 640
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
登录窗口html css源码代码
05-11
登录窗口是网页设计中经常需要用到的一个元素，它通常用来实现登录认证的功能。在HTML和CSS中，我们可以用一些基本的标记和属性来创建一个简单的登录窗口。 首先，在HTML中，我们可以使用form标签来创建一个表单，用来接收用户的输入数据。在表单中，我们可以使用input标签来创建输入框，用来让用户输入用户名和密码。可以定义type属性为“text”和“password”分别对应输入账号和密码。 然后，我们可以在表单里使用一个按钮来实现登录操作。按钮可以使用input标签中的type属性来设置button，name属性来定义按钮的名称，value属性来定义按钮上显示的文本。 接下来，我们可以使用CSS来美化登录窗口。我们可以为表单元素设置边框、背景色等样式，通过设置text-align:center; 实现表单元素水平居中。我们也可以用hover属性来实现鼠标悬停时的状态变化，比如当鼠标悬停在登录按钮上时，我们可以用background-color:#f1356d; 给按钮设置一个红色的背景色。 在CSS中还可以使用一些布局技巧，比如flex布局、grid布局等，来实现登录窗口的更加复杂的排版布局。 下面是一个简单的登录窗口的html和CSS代码： HTML CODE： ``` <form> <label for="username">用户名</label> <input type="text" id="username" name="username" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> ``` CSS CODE： ``` form { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 300px; height: 300px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; background-color: #eee; } label, input[type="submit"] { margin: 10px 0; } input[type="text"], input[type="password"], input[type="submit"] { width: 100%; height: 30px; line-height: 30px; text-align: center; border: none; border-radius: 5px; } input[type="submit"] { background-color: #4CAF50; color: white; cursor: pointer; transition: all 0.3s ease-in-out; } input[type="submit"]:hover { background-color: #f1356d; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值