CSS定义input的type类型样式

最新推荐文章于 2024-04-08 20:13:46 发布
最新推荐文章于 2024-04-08 20:13:46 发布
阅读量1.4w 收藏 2
点赞数 1
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzy000123/article/details/12611169
版权

 

  2. input { width:expression(this.type=="text"?"200px":"style"); }    

  3. input[type="text"] { width:200px }   

通常定义CSS时,书写input 规定宽度,可以使收集数据的页面显得非常整齐.

但如果表单内包含checkbox时,就需要为它单独定义一个样式,把class="name"与checkbox捆绑,非常麻烦.

有没有一种写法,可以分别定义全站input分别对应type="text",type="submit",type="chekbox"….等等的样式呢?

我看苏沈小雨的样式手册有"INPUT type=buttonINPUT type=fileINPUT type=passwordINPUT type=resetINPUT type=submitINPUT type=text"的应用单,但具体怎么用似乎没说.

有知道的好心人,指导一下吧:)

查到这个写法:input[type=text] ,Firefox有效,但IE不支持,对么?

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />     

  3. <html xmlns="http://www.w3.org/1999/xhtml"><br />     

  4. <head><br />     

  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </p>     

  6. <style type="text/css">      

  7. <!– INPUT{ border: 1px solid #D4D0C8; width: 200px; } input[type=text] { background-color: #FFCC33; } input[type=checkbox],input[type=radio] { width: 20px;border: 0px; } –>      

  8. </style>     

  9. <p></head><br />     

  10. <body> </p>     

  11. <form id="form1" name="form1" method="post" action="">     

  12. <input type="text" name="textfield" />     

  13. <input name="radiobutton" type="radio" value="radiobutton" />     

  14. <input type="checkbox" name="checkbox" value="checkbox" />     

  15. </form>     

  16. <p></body><br />     

  17. </html>   

 

提示：您可以先修改部分代码再运行

你是说对应type定义CSS？ 这个属性选择符目前IE不支持

<style type="text/css"> input { border:expression(this.type=="text"?"1px solid red":"style"); } input[type="text"] { border:1px solid red; } </style> <input type="text" /> <input type="password" />

提示：您可以先修改部分代码再运行

我是想知道,怎么定义input的样式表,才能让下面这两个东东的宽度等于20px?

<input type="radio" />

<input type="checkbox"  />

而input的其它type比如<input type="text" />的宽度为200px?

当然,下面的写法IE和FF都是支持的,但我嫌它麻烦,想找全局都支持,不需要再特意指定Input样式的办法:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Untitled Document</title>

<style type="text/css">

<!–

INPUT{ border: 1px solid #D4D0C8; width: 200px; }

input.long { background-color: #FFCC33; }

input.short { width: 20px;border: 0px; }

–>

</style>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

<input type="text" class="long"/>

<input type="radio" class="short" />

<input type="checkbox" class="short" />

</form>

</body>

</html>

提示：您可以先修改部分代码再运行

<style type="text/css">

input { width:20px }

input { width:expression(this.type=="text"?"200px":"style"); }

input[type="text"] { width:200px }

</style>

<input type="radio" />

<input type="checkbox" />

<input type="text" />

提示：您可以先修改部分代码再运行

再问问:)

input {

width:expression(this.type=="checkbox"?"20px":"style");

width:expression(this.type=="radio"?"20px":"style");

}

这两行有没有办法合成一行写?:)

找到了,呵呵.

input {

width: expression((this.type=="checkbox" || this.type=="radio") ?"20px":"style");

}

input的CSS样式,有没有分别对应type=text,submit,chekbox…的写法? 之 behavior

cssfile:

input {

behavior: url(bindbutton.htc);

}

htcfile:

<PUBLIC:COMPONENT lightWeight=true>

<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="load()" />

<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="mouseout()" />

<PUBLIC:ATTACH EVENT="onmouseover"  ONEVENT="mousemove()" />

<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="mousedown()" />

<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="mouseup()" />

<PUBLIC:PROPERTY NAME="direction" />

<SCRIPT LANGUAGE="JScript">

function load()

{

if ((element.tagName == ‘INPUT’ && (element.type == ‘button’ || element.type == ’submit’ || element.type == ‘reset’)) || (element.tagName == ‘BUTTON’))

{

element.style['background'] = ‘….’;

}

element.style.border = ((element.type==’checkbox’||element.type==’radio’)?’none’:’1px double #888888′);

}

function setImage(sImg)

{

if (bSet)

{

//element.style['background'] = ‘URL(’+ sImg +’)’;

}

}

function mouseout() { setImage(aNormal[iDir]); try{element.style.MozOpacity=0.8;element.filters.alpha.opacity=80;}catch(e){}}

function mousemove() { setImage(aOver[iDir]); try{element.style.MozOpacity=1;element.filters.alpha.opacity=100;}catch(e){}}

function mousedown() { setImage(aClick[iDir]); }

function mouseup() { setImage(aNormal[iDir]); }

</SCRIPT>

</PUBLIC:COMPONENT>

不常见的input属性

1.ENTER键可以让光标移到下一个输入框

<input ōnkeydown="if(event.keyCode==13)event.keyCode=9" >

2.只能为数字(有闪动) 　　

<input ōnkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

3.只能为数字(无闪动)

<input style="ime-mode:disabled" ōnkeydown="if(event.keyCode==13)event.keyCode=9" ōnKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

4.屏蔽输入法 　　

<input type="text" name="url" style="ime-mode:disabled" ōnkeydown="if(event.keyCode==13)event.keyCode=9">

5.只能输入两位小数，三位小数(有闪动) 　　

<input maxlength=9 ōnkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" ōnKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe name=text_kfxe>

6.取消按钮按下时的虚线框 　　

在input里添加属性值 hideFocus 或者 hideFocus=true

7.只读文本框内容        

在input里添加属性值 readonly

菜鸟专栏
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定义input type=file 样式的方法
09-28
当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file
CSS定义Radio单选项和Checkbox复选框样式有效代码
12-08
我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的，下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式，有需要了解的朋友可参考。 完全使用css来实例 复制代码代码如下: &lt...
前端CSS input type属性详解
m0_57339336的博客
10-24 6415
input在前端中使我们需要熟悉使用的一个标签，input中type属性值不止text一个。 可定义单行输入字段，用户可以自定义输入文字，默认最多输入20个。placeholder为文本框初始默认的文字效果图： value是按钮中的文字。效果图：submit和button的区别是可以点击回车就可以触发按钮，提交表单 效果图：定义一个单选的按钮，可以定义checked=“checked”强制勾选，同时也可以使用disabled使按钮不可选效果图： 定义一个可以勾选的按钮，与上一个rad
input的type属性所有参数(含css3.0)
JieChen0712的博客
05-13 6493
input的type属性所有参数(含css3.0) 这是我的第一篇博文，不知道要来写什么，刚好最近看了下css3中input的type属性，发现有很多简单实用的东西，于是就决定写这篇博文。（仅供参考，准确性有待检测！） 1. type=”button” button相信大家都不陌生的了！ <input type="button" value="这是一个类型为button" />
input标签的23种type类型
m0_74265396的博客
02-03 1020
示例： <input type="radio" name="radio" value="1">选项1 <input type="radio" name="radio" value="2">选项2。示例： <input type="number" name="quantity" min="1" max="10">示例： <input type="range" name="range" min="0" max="100">示例： <input type="datetime" name="datetime">
css中input有哪些type属性
tjq11111的博客
11-10 2123
个人看法：不同之处以w3c为准 1.text 文本类型，文本框 2.password 文本类型，密码框，输入信息被特色符号替换，但输入内容不会发生变化 3.button 按钮 4.submit 提交按钮 5.reserve 重置按钮 6.radio 单选框 ，需要配和name使用，多个同一选择的单选框name名字相同 7.checkbox 复选框，同样需要配和name使用 8.number 输入内容必须为数字类型 9.date 时间文本框 10.fi...
CSS选择器整理学习（下）
ct5211314的博客
01-31 627
书接上回，在开发中，有时候需要对特殊的元素进行特殊的处理，但有时候元素的位置不确定、层级不确定、数量不确定等问题，导致我们没办法进行元素的选择，这个时候我们就需要用到元素选择器了。
CSS样式风格定义
02-23
}/* 文本框的CSS定义:对应CSS中的“INPUT”，这里为文本框的风格设置，可定义内容为背景、字体、颜色、边框等 */Input{BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #666666 1px solid;BORDER-LEFT: #666666 1px ...
css笔记课程笔记2019，5，22
05-22
* css里面提供了一些定义好的样式，可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ** 记忆的方法 lv ha 5、css的盒子模型 ** 在...
jQuery.NiceFileInput.js:jQuery插件，使文件输入CSS样式简单易行
04-29
input type="file" /> ）是一项耗时的任务，在不同的浏览器上其结果并不相同。 NiceFileInput使事情变得容易，并在3个不同HTML元素（文本输入，按钮和div容器）上转换了文件输入，您可以使用CSS对其进行样式设置...
HTML CSS input 标签 type 各种类型
YDOOK
08-14 927
具体类型： type = button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 type = checkbox 定义复选框。 type = file 定义输入字段和 "浏览"按钮，供文件上传。 type = hidden 定义隐藏的输入字段。 type = image 定义图像形式的提交...
css基础之input属性
最新发布
2303_76379956的博客
04-08 118
一、前言借鉴二、常用属性。
css中input的类型
ITeye33的博客
03-08 2749
<input type="text"> ; //文本框 <input type="submin"> ; //提交按钮 <input type="button"> ; //普通按钮 <input type="checkbox"> ; //复选框 <input type="password">; //密码框 &l
【Css】input输入文本框的样式大全和搜索框实例（图文和完整源码）
热门推荐
【敦厚的曹操】的专栏
04-01 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
CSS 实现input自定义样式--文本框
且听风吟的博客
03-04 4080
CSS 实现input自定义样式--文本框
CSS修改input样式总结
qq_43086625的博客
07-26 514
css修改input的默认样式
常用css样式-input
weixin_43817873的博客
11-26 2222
常用的css样式-input篇 1.修改input输入框的默认样式 input{ background:none; outline:none; border:0px; } 2.修改placeholder的默认颜色 //各个浏览器 input::-webkit-input-placeholder{ color:#585c89; } input::-moz-placeholder{ ...
（转载）CSS分别设置Input样式（按input类型）
weixin_30312557的博客
09-14 64
（转载）http://www.uml.org.cn/html/201207202.asp 当你看到<input>这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有...
css怎么定义两个input
06-07
然后，你可以使用 CSS 来为这些输入框定义样式。例如，如果你想为这些输入框设置相同的样式，你可以使用如下的 CSS 代码： ```css input { padding: 10px; border: 1px solid gray; border-radius: 5px; } ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值