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

html-css014

如何使用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文本框有很多属性，如果需要单独定义其中一种类型的文本框有2种方法,设置独立样式或者统一类型样式。

直接在该文本框内添加一个类样式属性，如<input type="text" value="" class="input_1"/>给.input_1直接赋予样式属性。

对该类型的所有文本框添加样式.

<input type="text" value="我是text" class="input_1"/>

<input type="tel" value="我是tel"/>

<input type="checkbox"/>checkbox

<input type="radio"/>radio

<style>

.input_1{ width:200pxheight:40pxbackground:#cccborder:none}/**所有为.input_1的样式修改**/

input[type='tel']{width:200pxheight:40pxbackground:#000border:nonecolor: #fff}

/***针对所有类型为tel的做样式更改**/

</style>