表单样式美化（1）-----输入框Text，密码框Password,文本域Textarea样式美化

最新推荐文章于 2024-04-09 19:55:52 发布
最新推荐文章于 2024-04-09 19:55:52 发布
阅读量7k 收藏 4
点赞数
分类专栏： 前端技术 文章标签： CSS美化 文本框 浏览器兼容 CSS3 表单美化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bchen2012/article/details/38453685
版权
本文介绍了如何使用CSS3来美化表单中的输入框Text、密码框Password和文本域Textarea，解决浏览器默认样式不统一的问题。通过示例代码和效果图展示，包括border-radius实现圆角效果、resize属性禁用文本域大小调整、overflow属性控制滚动条显示以及outline-style消除Chrome下获取焦点时边框加粗等技巧。
摘要由CSDN通过智能技术生成

         浏览器默认的表单样式比较难看是总所周知的，而且各个浏览器的的样式又不统一，同一个系统在不同浏览器运行的效果又不一样，有些要求比较高的客户肯定对此很不满意。为此，我学习了一些CSS美化样式的知识，在此跟大家分享下。废话不多说，直接上代码：（这里上的是截图，有兴趣的同学动手敲下代码，研究研究大笑）

1、CSS代码



2、HTML代码

最低0.47元/天 解锁文章
追梦如风
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css textarea美化,[转载]一些 textarea 样式
weixin_42297675的博客
08-04 3382
R: #004824;SCROLLBAR-SHADOW-COLOR: #004824;SCROLLBAR-3DLIGHT-COLOR: #004824;SCROLLBAR-ARROW-COLOR: #00fc00;SCROLLBAR-TRACK-COLOR: #4848fc;SCROLLBAR-DARKSHADOW-COLOR: #004824;SCROLLBAR-BASE-COLOR: #004...
表单美化之textarea文本域背景的美化.rar
07-05
表单美化之textarea文本域背景的美化
13种常用按钮、文本框、表单等CSS样式
weixin_30454481的博客
06-11 1335
一、按钮样式.buttoncss{font-family:"tahoma","宋体";/*www.52css.com*/font-size:9pt;color:#003399;border:1px#003399solid;color:#006699;border-bottom:#93bee21pxsolid;border-left:#93bee21pxsolid;border-right:#93b...
textarea 样式
03-05
css textarea textarea 样式
element-textarea,滚动条样式更美观.
Backbody_的博客
03-09 1857
element-textarea,滚动条样式更美观.
第七课 表单控件-011
08-03
本节我们将深入探讨五个主要的表单控件：文本输入框、密码字段、文本域、单选与多选、按钮以及下拉菜单，并了解如何通过HTML来创建和配置这些控件。 1. 文本输入框和密码字段： `<input type="text">` 用于创建一...
HTML基础必看---表单,图片热点,网页划区和拼接详解
09-28
3. **文本域**：文本域通过<textarea>标签创建，允许用户输入多行文本，可以通过cols和rows属性设置文本域的宽度和高度。 4. **隐藏域**：隐藏域使用创建，用于存储不可见的数据，这些数据可以在表单提交时被发送到...
使用CSS控制表单-制作会员注册页面.docx
11-16
例如，`<input type="text">`用于创建文本输入框，`<input type="password">`则用于创建密码输入框，确保用户输入的密码不被他人看到。此外，`<input type="file">`用于创建文件上传功能，常用于让用户上传个人照片...
详解vue-validator（vue验证器）
08-31
输入框（text）、单选按钮（radio）、复选框（checkbox）、数字（number）、密码（password）、电子邮件（email）、电话（tel）、URL（url）、选择器（select）、文本域（textarea）等。 vue-validator允许我们...
全面解析Bootstrap表单使用方法（表单控件）
09-03
3. 文本域(textarea) 对于多行文本输入，Bootstrap使用`<textarea>`元素。默认情况下，添加`.form-control`类的textarea会自动设置合适的宽度和高度。例如： ```html <textarea class="form-control" rows="3"></...
超级好看的文本框样式
09-11
有了它之后，页r面上的文本框就非常好看啦，用法很简单，直过复制过来用就可以啦，input表单元素也是通用的
CSS样式去除input和textarea点击选中框
01-19
取消input和textarea的聚焦边框： 复制代码代码如下: input{outline:none} 取消textarea可拖动放大： 复制代码代码如下: textarea{resize:none}
textarea文本简单样式编辑
weixin_34179968的博客
12-11 908
第一种方法采用替换：就是将文本域的换号符号\r\n，替换成其他符号，存入数据库，然后显示的时候再转换回来: //转换换行符$str=preg_replace("/\r\n|\r|\n/","&lt;br&gt;",$str);//转换回来$str=preg_replace("/&lt;br&gt;/","\r\n",$str); 第二种方法使用js在线编辑器：使用js来模拟文本
css：去除input和textarea默认边框样式并美化
彭世瑜的博客
06-28 4276
同样参考element-ui的css，可以实现如下效果。参考element-ui的css，可以实现如下效果。textarea默认样式和focus样式。input默认样式和focus样式。/* 鼠标hover *//* 鼠标hover *//* 去除默认样式 *//* 去除默认样式 *//* 自定义样式 *//* 自定义样式 *//* 提示文字 *//* 获得焦点 *//* 提示文字 *//* 获得焦点 */
表单美化之textarea文本域背景的美…
php菜鸟技术天地
06-02 4186
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="tex
textarea无边框文本透明背景文本样式
热门推荐
自由空间
02-28 2万+
textarea{ border:0; background-color:transparent; /*scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon; overflow: hidden;*/ color: #666464; height: auto; }
CSS-文本域和输入框美化处理、文字和图片对齐、文字超出文本域以省略号显示、magin的运用
最新发布
好看的皮囊千篇一律，有趣的灵魂万里挑一。
04-09 1412
文本域和输入框美化处理、文字和图片对齐、文字超出文本域以省略号显示、magin的运用
表单美化设置
m0_68618659的博客
07-15 543
input提供了多种方式用于获取用户输入的信息，获取方式具体包括。（1）提供输入框，获取用户输入的内容，输入的内容又可以分为文字内容和密码，在HTML5中又增加了邮箱地址、下拉列表、网页路径、搜索框等类型；1）、在css样式中outlinenone;可以将input标签输入框的黑边框去除掉。属性的值，不同的type值会在各自的参考页中进行介绍。3、美化表单页面也需要一些css样式才可以办到，单靠input标签制作不出精美的表单（如图）3）、backgroundurl（）；...
如何修改滚动条的样式更为美观？比如textarea的滚动条。
Vgbire的博客
06-05 3607
    在一次开发在线聊天室时，发表内容使用textarea标签，但是当文字过多时，原生的滚动条实在太难看了。 <div class="content"> <textarea ref="input" v-model="content" autocomplete="off" class="input" rows="4"></textarea> </div>    &nb
.网站中须出现一张表单页面该表单页面应有按钮、输入框、单选框、复选框、下拉框、文本域。还有登录界面
05-25
好的，下面是一个示例表单页面和登录界面的代码： 表单页面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例表单页面</title> </head> <body> <form action="#" method="POST"> <label>姓名：</label> <input type="text" name="name"><br><br> <label>性别：</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女<br><br> <label>爱好：</label> <input type="checkbox" name="hobby" value="reading">阅读 <input type="checkbox" name="hobby" value="sports">运动 <input type="checkbox" name="hobby" value="travel">旅游<br><br> <label>城市：</label> <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select><br><br> <label>个人简介：</label> <textarea name="intro" rows="5" cols="30"></textarea><br><br> <input type="submit" value="提交"> </form> </body> </html> ``` 登录界面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录界面</title> </head> <body> <form action="#" method="POST"> <label>用户名：</label> <input type="text" name="username"><br><br> <label>密码：</label> <input type="password" name="password"><br><br> <input type="submit" value="登录"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值