css如何实现只设置type为text的input元素的样式

css如何实现只设置type为text的input元素的样式:
在实际应用中,可能会遇到这样的情况,那就是有很多input元素,但是type类型各不相同。
可能只需要为某种type类型指定相关的样式。当然实现此效果的方式很多,比如单独为指定类型的input设置class。
下面介绍一下如何利用属性选择器实现此功能。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input[type=text]{
  width:200px;
  height:18px;
  color:red;
}
</style>
</head>
<body>
<input type="text" value="蚂蚁部落">
<input type="tel" value="053288905555">
</body>
</html>

上面的代码只会对type属性值为text的input元素设置相关的样式属性。
关于属性选择器可以参阅css属性选择器板块。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16358

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-31 18:07:46

css如何实现只设置type为text的input元素的样式的相关文章

jQuery如何获取指定type属性值的input元素

jQuery遍历input文本框并获取input的name属性值:因为input标签的type属性是多种多样的,例如text.radio.checkbox等,但是实际应用中往往需要获取某一类属性值的input元素,下面就通过实例简单介绍一下.代码实例如下: $("input:text", document.forms[0]).each(function(){alert(this.name)}); 以上代码可以获取type属性值为text的input元素,并且遍历弹出它们的name属性值

设置type为file的input标签选择图片类型

设置能选择各种类型的图片如:png,jpg <input id="file" name="file" type="file" accept="image/*" /> 设置只能选择只能选择单个类型的文件如只能选择png的图片 <input id="file" name="file" type="file" accept="image/png&

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

为什么只设置line-height就可以实现文本垂直居中效果

为什么只设置line-height就可以实现文本垂直居中效果:在实际应用中,如果让单行文本在元素中垂直居中,可以将元素的高度和行高值设置为相同即可.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &l

前端基础-CSS的属性相关设置

一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 bord 粗体    * border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold    * inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜  3.fo

CSS如何将边框设置为虚线

CSS如何将边框设置为虚线: 在默认状态文本框都是实线边框,下面就来介绍一下如何实现虚线边框. 实例代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title&

css如何实现只保留内部边框

css如何实现只保留内部边框: 在实际应用中可能有这样的需求,那就是只保留表格的内部边框,可能这样的需求不多,既然有这样的需求,作为程序员就要实现这样的功能,下面分享一段能够实现此功能的代码实例. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51tex

前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉.咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select.radio . checkbox .file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够! 1.select与input file: 相信大家都遇到过这样的问题,大多数浏览

jquery css事件编程 尺寸设置

<!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> <title>jquery css事件编程 尺寸设置&l