-
2021-06-11 14:09:42
输入框景背景透明:
鼠标划过输入框,输入框背景色变色:
style="width: 106; height: 21"
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
输入字时输入框边框闪烁(边框为小方型):
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
输入字时输入框边框闪烁(边框为虚线):
#oText{border:1pxdotted #ff0000;ryo:expression(οnfοcus=function light(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
自动横向廷伸的输入框:
自动向下廷伸的文本框:
输入几个回车试试
只有下划线的文本框:
软件序列号式的输入框:
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
—————
软件序列号式的输入框(完整版):
var sn=new Array();
for(i=0;i
sn=T.value;
alert(sn.join("—"));
—————
作者:zdrjlamp
更多相关内容 -
HTML CSS input输入框样式
2021-12-01 15:52:07/* 修改输入框placeholder的字体颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */ color: rgb(12, 203, 130); } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgb(12, 203.../* 修改输入框placeholder的字体颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */ color: rgb(12, 203, 130); } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgb(12, 203, 130); } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:rgb(12, 203, 130); } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: rgb(12, 203, 130); } /* 点击输入框不显示边框*/ input{ outline:medium; } /* 修改输入框placeholder的字体颜色end*/
-
html5文件上传输入框样式代码.zip
2019-07-05 00:27:14html5文件上传输入框样式代码是一款自定义表单上传输入框样式特效代码。 -
修改input输入框的样式
2021-06-12 04:18:58直接上代码.input{-web-kit-appearance:none;-moz-appearance: none;font-size:1.4em;height:2.0em;border-radius:5px;...}自定义输入框样式:效果:说明:首先要将input输入框的默认样式去掉-web-kit-a...直接上代码
.input{
-web-kit-appearance:none;
-moz-appearance: none;
font-size:1.4em;
height:2.0em;
border-radius:5px;
border:1px solid #c8cccf;
color:#6a6f77;
outline:0;
}
自定义输入框样式:
效果:
说明:
首先要将input输入框的默认样式去掉
-web-kit-appearance:none;
-moz-appearance: none;
然后我们加上边框和圆角,并设置input的高度和字体大小和颜色
font-size:1.4em;
height:2.7em;
border-radius:4px;
border:1px solid #c8cccf;
color:#6a6f77;
然后将input输入框的轮廓去掉:
outline:0;
修改placeholder的样式
::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #6a6f77;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #6a6f77;
}
input::-webkit-input-placeholder{
color: #6a6f77;
}
原文:https://blog.csdn.net/qq_35718410/article/details/52149894
原文:https://www.cnblogs.com/1906859953Lucas/p/10953423.html
-
前端HTML输入框的CSS设置
2022-02-24 19:49:41DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #i1{ width: 180px; height: 30px; padding-left: ...<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #i1{ width: 180px; height: 30px; padding-left: 10px; /*去掉默认带的外线框*/ outline: none; /*重新设置边框*/ border:1px solid lightgray; border-radius: 6px; } /*焦点选择器 只有标签获取焦点才会执行*/ #i1:focus{ border-color: skyblue; } </style> </head> <body> <input type="text" id="i1" placeholder="请输入账号"/> <button>登录</button> </body> </html>
运行结果:
-
html页面输入框input的美化
2021-06-10 15:34:49input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同例如: 上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式以下是一个简单的文本框样式... -
Html-去除input输入框中默认样式
2021-11-19 22:57:37Html-去除input输入框中默认样式 border: none; outline: none; text-decoration: none; -
一款漂亮的表单输入框样式
2021-06-12 09:03:33/p>Strict//EN" ...一款漂亮的表单输入框样式*{margin:0;padding:0;}body{font-size:63%;color:#000;}.input_on{padding:2px 8px 0pt 3px;height:18px;border:1px solid... -
HTML文本框样式大全
2022-02-01 13:54:00输入框景背景透明: 鼠标划过输入框,输入框背景色变色: <INPUT value=“Type here” NAME=“user_pass” TYPE=“text” SIZE=“29” οnmοuseοver=“this.style.borderColor=‘black’;this.style.... -
HTML5 可显示隐藏密码的INPUT密码输入框.rar
2019-07-10 17:40:23HTML5_密码输入框demo,INPUT样式,去掉背景阴影模仿原生应用的输入框,用一个图片来切换是否显示密码,用到了图片的显示与隐藏、切换技术,使用最原始的js语法实现,可对应换成jquery语法进行逻辑控制,将password... -
HTML5去掉输入框type为number时的上下箭头的实现方法
2020-11-21 15:34:06公共样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>去掉输入框type为number时的上下箭头</title> <style> /*谷歌*/ input::-webkit-outer-spin... -
input输入框的各种样式 文本框为下划线 text输入框样式
2021-06-10 16:18:29输入框景背景透明:鼠标划过输入框,输入框背景色变色:style="width: 106; height: 21"onmouseout="this.style.borderColor=‘black‘;this.style.backgroundColor=‘#ffffff‘" style="border-width:1px;border-... -
输入框input样式,各种效果齐全
2019-11-11 00:55:22输入框input样式,各种效果齐全 -
输入框样式美化
2019-04-06 11:14:22输入框样式美化 1、效果: 2、代码: <html> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></scr... -
关于设置html输入框的款式方面
2019-01-09 11:30:27关于设置html输入框的款式方面 ** 之前我们学习小组写一个web网络考试系统,我理所应当的被分到网页登录界面和考试界面的设计。 这是我写到一半的代码 <div class="in"> &... -
input输入框的各种样式
2021-06-10 15:34:57输入框景背景透明:鼠标划过输入框,输入框背景色变色:style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=... -
CSS3提交意见输入框样式_html/css_WEB-ITnose
2021-06-19 00:32:43做了个输入框样式,如图:CSS代码如下:#button { cursor:pointer; width:30%; margin:5px; padding:8px; border-radius:4px 4px 4px 4px; font-size:14px; font-weight:bold;}input{transition:all 0.30s ease-... -
更改input输入框的样式
2021-06-12 04:19:41也许不是翻译hhh这篇文章的目的讲解应用css更改input标签example假设一个场景——设计师给你一份webapp原型图,然后你看见他设计了一个选择下拉框(select drop-down input(就是select标签))和浏览器的默认样式不一样... -
浏览器保存密码默认输入框样式
2021-10-09 10:49:20浏览器保存账号密码自带背景色,用以下css样式直接覆盖 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { color: #666 !important; -webkit-text-fill-color: #666 !important; ... -
多种漂亮炫酷的输入框特效
2018-12-04 16:32:38漂亮的输入框特效,可以做为搜索页面,炫酷又实用,欢迎下载。 -
HTML文本框样式大全!(很实用,转载!) | 学步园
2021-07-01 05:27:59输入框景背景透明:鼠标划过输入框,输入框背景色变色:style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=... -
html5中的输入框、按钮等样式
2019-04-10 10:25:161.文本框样式: <input type="text" placeholder="Please(提示文字)" style="width: 600px;height: 20px;position: absolute;top: 179px;left: 250px; border-bottom-right-radius: 10px; border-bottom-left-... -
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2020-12-14 02:15:44输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。 刚开始设置了输入框背景色透明(background-color:transparent;),在iOS上面背景色和边框都没有了,但是在andriod上边框和背景色... -
CSS3提交意见输入框样式代码
2021-06-13 06:55:59做了个输入框样式,如图:CSS代码如下:复制代码代码如下:#button {cursor:pointer;width:30%;margin:5px;padding:8px;border-radius:4px 4px 4px 4px;font-size:14px;font-weight:bold;}input{transition:all 0.30s... -
简单验证码输入框样式
2018-12-11 11:35:00项目页面需要输入验证码,可是百度了一下,没有找到简单的静态HTML样式。对于我一个初学者来说,没法直接拿过来就用。无奈之下,自己想了个办法,实现这个样式。因为现在上传资源最少要一分,所以现在拿出来在这里... -
HTML5的部分输入框实现方法
2022-03-22 09:55:28input type="你想输入框是什么类型" value="你想要文本框显示什么" name="这个文本框叫什么名字"size="文本框的长度是多少" maxlengh="文本框最多输入多少字符" <inp type="radio"> 这也是一个输入框,它... -
html带图标输入框 适合手机端
2017-07-10 11:00:35html带图标输入框 适合手机端