使用CSS处理html输入表单?
问题描述:
因此,目前我正在尝试编辑html输入表单的总体布局和外观。继承人我的HTML输入形式的我的代码片段:使用CSS处理html输入表单?
<p> <form action='register.php' method="POST"></p>
<p>First Name: <input type="text" name="firstName" />Last Name: <input type="text" name="lastName"/></p>
<p>Address: <input type="text" name="address" /></p>
<p>City: <input type="text" name="city" /></p>
这编辑是这样的CSS:
#Address, #emailAddress, #password, #confirmPassword, #firstName, #lastName{
width:50%;
outline: double 1px #FFA500;
height:16px;
padding:10px;
}
问题是,没有任何与此代码更改。这不应该改变我的html输入形式吗?
答
尝试在您的html上使用id
属性而不是name
属性。
<input type="text" id="firstName" />
答
您需要为输入分配一个ID或类。
记住,用CSS;
ID = #object
类= .object
<p>First Name: <input type="text" name="firstName" id="firstName" />
答
它要好得多一次定义样式为所有input
元素:
input {
width: 50%;
outline: double 1px #FFA500;
height: 16px;
padding: 10px; }
你应该阅读CSS selectors。
答
这里有一些快速意见:
- 元素的不当嵌套。例如,在段落标签中打开表格标签。此外,表单标签未关闭
- 用“id”属性,而不是“名”
- 确保#Address输入ID(目前,事实并非如此)
- 城市输入ID不匹配反映在CSS
我知道我错过了一些东西!非常感谢! – mike 2012-07-12 17:21:04
另外,正如@Wex提到的那样,通过为一个选择器同时定义所有'输入'元素的样式,它将为您节省时间。看看他发布的代码。 – jzacharia 2012-07-12 17:26:04