input输入框的各种样式

输入框景背景透明:
<input style="background:transparent;border:1px solid #ffffff">

鼠标划过输入框,输入框背景色变色:
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor=‘black‘;this.style.backgroundColor=‘plum‘" 
style="width: 106; height: 21" 
onmouseout="this.style.borderColor=‘black‘;this.style.backgroundColor=‘#ffffff‘" style="border-width:1px;border-color=black">

输入字时输入框边框闪烁(边框为小方型):
<Script Language="JavaScript">
function borderColor(){
if(self[‘oText‘].style.borderColor==‘red‘){
self[‘oText‘].style.borderColor = ‘yellow‘;
}else{
self[‘oText‘].style.borderColor = ‘red‘;
}
oTime = setTimeout(‘borderColor()‘,400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

输入字时输入框边框闪烁(边框为虚线):
<style>
#oText{border:1px dotted #ff0000;ryo:expression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">

自动横向廷伸的输入框:
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">

自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

只有下划线的文本框:
<input style="border:0;border-bottom:1 solid black;background:;">

软件序列号式的输入框:
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

软件序列号式的输入框(完整版):
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">

时间: 2024-12-29 17:43:41

input输入框的各种样式的相关文章

CSS样式:Input输入框向外发光特效

在CSS里面定义INPUT输入框的全局样式 input[type=text]:focus,input[type=password]:focus,textarea:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box

input的value文本输入框文字提示样式

一.value="请输入你要搜索的关键词" onfocus="if (this.value=='请输入你要搜索的关键词') this.value='';" 二.value="请输入你要搜索的关键词" onblur="if(this.value==''){this.value='请输入你要搜索的关键词'}" onfocus="this.value=''" value="请输入你要搜索的关键词&quo

为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式

目录 1.为Input输入框添加圆角并去除阴影 2.去除获得焦点时方角样式 内容 1.为Input输入框添加圆角并去除阴影 1.1 border-radius不同浏览器下兼容设置: .boder-radius{ -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome.safari等) -moz-border-radius:6px;//适配firefox浏览器 -ms-border-radius:6px;//适配IE浏览器 -o-border-rad

微信小程序组件解读和分析:十、input输入框

input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <view class="content"> type:有效值:text 感觉没什么区别 <input  placeholder="type=text" type=

input输入框和 pure框架中的 box-sizing 值问题

在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响宽度.后来发现是pure框架为输入框设置了box-sizing导致(IE6 7不支持),我得分别设置不同的宽度.  所以,在使用这个框架的时候, 为了统一,应该设置   input[type=text] { box-sizing : content-box; -moz-box-sizing : co

input标签中和validate中存在required属性的对应的input输入框设置为红色

今天公司突然提出要将页面中必填的输入框设置成红色,开始是想省事点直接到页面上在必填的输入框中加入样式,这样需要一个一个也页面的改,而且感觉写的很死!后来经过讨论决定采用一种灵活的方式加入样式.经过一天的努力终于成功找到解决办法实现代码如下,虽然代码不长但是却花费了我一天的时间,在里面我又学到了许多知识. 通用方法代码: /** * 将页面中的必填选项输入框设置为红色 * @param form  表单名称 * @param validateOption  验证操作名 */ common.requ

移动端input“输入框”常见问题及解决方法

转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,输入法弹出后,fiexd失效,页面中定位好的元素随屏幕滚动. 针对这个问题,我们一起来看下以下几种方案: 方案一: Web API 接口 :scrollIntoView 的应用,将input输入框显示在可视区域. 1 // 输入框获得焦点时,元素移动到可视区域

input输入框联想功能

一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的问题.还是直接上代码吧. 首先是一个简单的界面 auto.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思