html - 如何使用 CSS 设置 html/form 元素的样式?

标签 html css

我正在尝试创建一个登录表单,到目前为止我的 html 是:

<body id="login">
<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>

        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>

        <label>
        <span>&nbsp;</span>
        <input type="submit" value="Send" />
        </label> 
</form>
</div>
</div>

我想使用 CSS 对其进行样式设置。我如何访问:

a) 整体形式改变整体风格

b) 电子邮件地址标题和框

c) 按钮

我试过使用 . # > 但现在我自己很困惑。这可能是我犯的一个非常愚蠢的错误,但我无法弄清楚...

最佳答案

您可以通过以下方式访问:

a)整体形式改变整体风格 使用#loginform {/* CSS 规则*/> 来处理表单容器的整体样式。由于除了表单之外没有其他元素,它的工作方式就好像您以表单本身为目标一样。

b) 电子邮件地址标题和框 使用 #loginform label {/* CSS rules */> 以标签处的 CSS 规则为目标,使用 #email{} 以电子邮件输入框为目标。您可以通过添加其他元素的 ID(例如 #email, #password {/* CSS 规则 */>)将最后一条规则重新用于其他元素

c) 按钮 使用 input[type=submit] {/* CSS 规则 */> 来设置提交按钮的样式。

关于html - 如何使用 CSS 设置 html/form 元素的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28700958/

相关文章:

html - 如何获得 Calibri 和指定的表格显示宽度?

html - 如何使按钮居中并使它们大小相同

javascript - XMLHttpRequest 无法加载 "url"。 Access-Control-Allow-Origin 不允许 Origin null

Javascript:2 个用户输入值的平均值

html - html5音频进度条/tribbles的问题

html - 如何将元素 (nav, h1) 标题模板 [http ://html5up.net/uploads/demos/alpha/][1] 置于中心?

css - 如何在默认的 Kendo 样式上加载不同的 Kendo UI Slider

css - 内嵌动画 SVG 无法在 IE/Edge 中加载

css - 如何让css3动画永远循环

jquery - 使用 jQuery 在表中的单独 tr 中使用 .text() 查找值