如何使用CSS给所有td下的文本框定义样式?

html-css052

如何使用CSS给所有td下的文本框定义样式?,第1张

直接使用css的标签选择器就可以实现

td input[type='text'] {.../*设置需要的样式*/}

举个例子:

创建Html元素

<table>

<tr>

<td>name</td>

<td><input type="text"></td>

<td>sex</td>

<td><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>

</tr>

<tr>

<td>tel.</td>

<td><input type="text"></td>

<td>addr.</td>

<td><input type="text"></td>

</tr>

</table

设置css样式

table{border-collapse: collapse}

td{border:1px solid #cccpadding:5px}

/*设置单元格中文本框的样式*/

td input[type='text']{border:1px solid greenborder-radius:3pxheight:30px}

观察显示效果

需要说明:input[type="text"] 这种写法不支持IE,但支持Firefox。

可以这样写:

<style>

input {

    color: #FFF

    }

 

<!--针对IE的-->

input {

    color:expression(this.type=="text"? red:"style")

    }

 

<!--针对IE以外的-->

input[type="text"] {

    color: red

    }

</style>