css 区分 input 的类型 input[type…

最新推荐文章于 2022-10-24 16:39:57 发布
最新推荐文章于 2022-10-24 16:39:57 发布
阅读量599 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzf_001/article/details/28866051
版权

css 区分 input 的类型 input[type="text"]

input[type="text"]{ border:1px; border-style:solid; border-color: #CCCCCC; }

--------------------------------------------------
ie6 兼容

input[type="text"]{ border:1px; border-style: solid; border-color: #CCCCCC; }


input{


border-color:expression_r(this.type=="text"?"#CCCCCC":"Default");
border:expression_r(this.type=="text"?"1px":"Default");
border-style:expression_r(this.type=="text"?"solid":"Default");

}

--------------------------------------------------
input[type="text"]{

--------------------------------------------------

<!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>无标题文档</title>
<style type="text/css">
input[type="text"]{
background-color:#FFC;}
input[type="password"]{
background-color:#339966;}
input[type="submit"]{
background-color:blue;
color:white;}
input[type="reset"]{
background-color:navy;
color:white;}
input[type="radio"]{
margin:10px;}
input[type="checkbox"]{
margin:10px;}
input[type="button"]{
background-color:lightblue;}
</style>
</head>
<body>
<dl>
<dt>textbox:<dd><input type="text" value="www.66css.com">
<dt>password:<dd><input type="password" value="www.66css.com">
<dt>submit:<dd><input type="submit">
<dt>reset:<dd><input type="reset">
<dt>radio:<dd><input type="radio" name="ground1">
<dt>checkbox:<dd><input type="checkbox" name="ground2">
<dt>button:<dd><input type="button" value="www.66css.com">
</dl>
</body>
</html>

zhizunbao_nie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript如何判断input数据类型
11-20
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在HTML中接收用户输入信息一般都会用到<input/>。我今天本来想实现一个功能：由用户在input中输入自己的年龄，然后根据不同的年龄段弹出不同的信息，为了让程序更加严谨，我得判断从input中获取到的值必须是数字（这个问题其实可以直接限制input的输入内容为数字，在这里我想要实现通过javascript判断input里的值是否是数字）。　　 试过很多种方法发现都不行，因为不管用户在input中输入了什么类型的数据，我通过ja
css 区分 input 的类型 input[type="text"]
qw_xingzhe的专栏
06-01 6202
css 区分 input 的类型 input[type="text"] input[type="text"]{ border:1px; border-style:solid; border-color: #CCCCCC; } -------------------------------------------------- ie6 兼容 /* ie6 不支持 */ input[
input的CSS样式,分别对应不同的type的写法
00bug的专栏
04-19 1339
 /*在IE中*/input { border:expression(this.type=="text"?"1px solid red":"style"); }/*在Firefox中*/input[type="text"] {    border:1px solid red; }-->
利用 css3 模仿 input[type=radio] 样式
MrLiber的博客
06-27 577
做项目的时候需要使用单选按钮input[type=radio]，但是默认的样式与UI设计不一致,所以需要修改默认的样式，如下图。搜索的时候发现有一些实现是利用背景图实现。不想使用图片，所以利用css3的重新实现了一遍。在ie8下无效。 原理 利用<label>标签与对应的<input>关联,给<input>设置透明,使用position(定位)让用户看到的是&l...
css3修改input[type=radio]样式
qq_43248623的博客
03-27 260
在项目中经常，需要使用单选按钮input[type=radio]，但是浏览器的默认样式可能与我们需要实现的样式差距很大，可以使用css3来实现想要达到的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { position: rel
控制input的CSS但不影响CheckBox以及Radio的样式
09-05
在一些Web界面,有时候为了方便会写一个全局的input样式,这样所有的样式会立刻变化，如果能更好的区分checkbox等呢。
css样式之区分input是按钮还是文本框的方法第1/4页
10-30
在CSS样式中，区分`<input>`标签是按钮还是文本框是前端开发中常见的需求，因为`<input>`标签在HTML中具有多种用途，可以表示文本框、密码框、按钮等不同类型的输入控件。当需要针对不同类型的`<input>`设置特定样式...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
<input type="email" placeholder="请输入邮箱地址" /> <input type="phone" placeholder="请输入手机号码" /> ``` 8. **导航到其他页面展示更多输入框类型** - 示例代码中的`navigator`组件可以链接到其他页面...
CSS3立体开关按钮特效
07-31
在实现5种颜色的单选按钮切换时，可以利用CSS的`class`选择器或`data-*`属性来区分不同颜色的按钮。例如，为每个按钮添加不同的`class`，然后为每个`class`定义相应的背景色和其他样式。这样，只需更改`class`，就能...
html+css+js购物车
09-24
例如，可以使用`<table>`元素来展示商品，`<tr>`表示行，`<td>`表示单元格，`<input type="number">`作为数量调整器。商品名称、单价、库存状态等信息都可以放在对应的`<td>`中。 【CSS美化与布局】 CSS...
CSS为input标签不同类型分别设置样式
不再更新，新博客 chgl16.space
01-28 1万+
如为以下不同类型的&lt;input&gt;标签分别设置样式，而不想用额外的class或者id &lt;div id="create-div"&gt; &lt;form action="./create.do" method="post"&gt; &lt;input type="text" name="id" placeholde
使用伪元素简单实现input框的判断√×
樊小书生
02-05 2662
一些表单中的输入框输入之后会进行判断，会在input框之后以√×来表示判断的结果，下面我使用伪元素来简单的实现这个功能。
css 解决 input后面的img对齐办法
追求更专业的设计
11-20 3559
在网页制作中，常将 input 和 img 放在同一行，img标签总是比input高出一个头，非常难看。 CCS实现input和img水平对齐的方法 同时给input和img添加vertical-align:middle就行了， "> http://wpa.qq.com/pa?p=2:() %>:41" alt="点击这里给我发消息" title="点击这里给我发消息" sty
input的type属性所有参数(含css3.0)
JieChen0712的博客
05-13 6555
input的type属性所有参数(含css3.0) 这是我的第一篇博文，不知道要来写什么，刚好最近看了下css3中input的type属性，发现有很多简单实用的东西，于是就决定写这篇博文。（仅供参考，准确性有待检测！） 1. type=”button” button相信大家都不陌生的了！ <input type="button" value="这是一个类型为button" />
前端CSS input type属性详解
最新发布
m0_57339336的博客
10-24 6626
input在前端中使我们需要熟悉使用的一个标签，input中type属性值不止text一个。 可定义单行输入字段，用户可以自定义输入文字，默认最多输入20个。placeholder为文本框初始默认的文字效果图： value是按钮中的文字。效果图：submit和button的区别是可以点击回车就可以触发按钮，提交表单 效果图：定义一个单选的按钮，可以定义checked=“checked”强制勾选，同时也可以使用disabled使按钮不可选效果图： 定义一个可以勾选的按钮，与上一个rad
CSS定义input的type类型样式
zzy000123的专栏
10-11 1万+
input { width:expression(this.type=="text"?"200px":"style"); }     input[type="text"] { width:200px }    通常定义CSS时,书写input 规定宽度,可以使收集数据的页面显得非常整齐. 但如果表单内包含checkbox时,就需要为它单独定义一个样式,把cla
JS判断input输入类型
weixin_34101229的博客
03-14 473
只能输入数字：<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /> 只能输入数字和小数点：<input ...
jq,js获取input 标签的type的类型
热门推荐
ccmedu的博客
11-12 1万+
<input type ="hidden" id = "id" value="xxx" name= "test" /> 获取input标签中type的类型js写法如下： var type = document.getElementById('Id').type type会等于'hidden'或者'text'或者'radio'等等。 jq的$("#id")....
前端开发面试题2.pdf
07-14
素包括：a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、select、small、span、strong、sub、sup、textarea和tt。 块级元素包括：address、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值