来看看：怎样用css把持input中的text和radio

只看该作者 · 发表于 2015-1-16 07:38:11

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：那怎样用css把持input中的text和radio呢？我找到了两个办理举措.
在制造表单页面的时分，假如页面有良多表单，我就不肯意独自界说一个input款式然后每一个inputtext下都往挪用这个css（<inputtype="text"name="textfield"class=""/>）.我以为如许每一个input援用css的做法不睬想,并且也太贫苦了.我习气界说一个总的input款式。如input{border:1pxsolid#f00},如许为一切的input界说了一个白色边框。如许就必需在radio挪用一个无白色边框的css如：.radio{border:none}把radio的白色边框往失落.但如许radio的表面就和默许情形下的比拟不美妙了良多。我在做网站的时分就碰着如许的成绩，如图：

没有界说input,默许的情形下：

登录/注册后可看大图

界说了input全局款式的情形下radio的表面就丢脸了很多：

登录/注册后可看大图

那怎样用css把持input中的text和radio呢？破洛洛找到了两个办理举措，仍是以示例来讲明：

办法一：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css怎样把持input中的text和radio</title>
<styletype="text/css">

</style>
</head>
<body>
<inputtype="text"name="textfield"/>
<inputtype="radio"name="radiobutton"value="radiobutton"/>
</body>
</html>

就是在css中挪用了text.htc文件。何谓htc文件?htc的全称就是HtmlComponents，由微软在IE5.0后入手下手供应的一种新的指令组合,它是一个JavaScript的代码文件,次要把JavaScript代码封装起来。以是htc文件只在IE下无效。

在text.htc文件中写进代码：
<public:component>
<public:attachevent="oncontentready"onevent="init()"/>
<public:attachevent="ondetach"onevent="on_deatch()"/>
<script>
functioninit()
{
if(element.type=="text")
{
element.style.border="1pxsolid#f00"
}
}
</script>
</public:component>

ps:此办法的一个bug是在firefox下不撑持。并且听说用htc对照占资本。以是不保举利用。

办法二：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css怎样把持input中的text和radio</title>
</head>
<body>
<inputtype="text"name="textfield"/>
<inputtype="radio"name="radiobutton"value="radiobutton"/>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
varobj=document.getElementsByTagName("input");
for(vari=0;i<obj.length;i++)
{
if(obj.type=="text"){obj.style.border="1pxsolid#f00"}
}
</script>

ps:就是在页面最上面加上这端JS代码。这个办法对照有用，也能够保举利用，出格感激可乐用JS的举措来办理这个成绩

示例显现：

登录/注册后可看大图

2009042317281903.jpg (26.92 KB, 下载次数: 11)

下载附件保存到相册

来看看：怎样用css把持input中的text和radio

2015-1-16 07:38 上传

你可以轻松地控制页面的布局。

只看该作者 · 发表于 2015-1-18 06:42:41

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-25 22:04:39

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-4 08:53:57

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-2-9 20:56:53

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-27 21:47:34

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-3-9 15:17:26

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-17 00:44:35

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：怎样用css把持input中的text和radio

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子