Question

我想创建一个登录页面，然后找到HERE的模板。

当我将登录<button>替换为<asp:Button>时，css样式看起来没有应用于此，为什么？以及如何解决它？

有我的HTML代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="nickydemo.loginstyle.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Dark Login Form</title>
    <meta charset="utf-8" />
  <%--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--%>
    <link rel="stylesheet" href="css/style.css"/>
    <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <form id="form1" runat="server" class="login">
        <p>
            <label for="login">Email:</label>
            <input type="text" name="login" id="login" value="name@example.com"/>
        </p>

        <p>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="4815162342"/>
        </p>

        <p class="login-submit">
            <%--<button type="submit" class="login-button">Login</button>--%>
            <asp:Button ID="Button1" CssClass="login-button" runat="server" Text="Login" />
        </p>

        <p class="forgot-password"><a href="index.html">Forgot your password?</a></p>
    </form>
</body>
</html>

Answer 1

：在容器内渲染之前和之后

只能定义伪元素（或者更好地说是伪元素支持）容器元素。因为他们的呈现方式作为子元素在容器本身内。 输入不能包含其他元素因此不受支持。一个按钮另一方面，它也是一个表单元素支持他们，因为它是一个其他子元素的容器。

请参阅 SO Answer

Answer 2

请注意，您提供的示例的HTML与您创建的HTML不同。

示例：

<p class="login-submit">
    <input type="submit" name="Button1" value="Login" id="Button1" class="login-button">
</p>

此致：

<p class="login-submit">
  <button type="submit" class="login-button">Login</button>
</p>

该示例使用：按钮之前和之后获取输入所没有的蓝色背景。因此，您必须强制它成为按钮，或者您可以在输入周围创建div或其他元素以获得此结果。

编辑：

试试这个：

<div class="login-submit">
    <div class="login-button">
        <input type="submit" class=""></input>
    </div>    
</div>

并将.login-button（style.css的第213行）的填充更改为padding：0px;

第二次编辑：删除.login-button：before（style.css的第232行）的部分并添加以下内容：

input#Button1 {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background: #00a2d3;
    border-radius: 24px;
    background-image: -webkit-linear-gradient(top, #00a2d3, #0d7796);
    background-image: -moz-linear-gradient(top, #00a2d3, #0d7796);
    background-image: -o-linear-gradient(top, #00a2d3, #0d7796);
    background-image: linear-gradient(to bottom, #00a2d3, #0d7796);
    -webkit-box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
    z-index: 2;
    width: 38px;
    display: block;
    color: transparent;
    border: none;
}

Answer 3

我认为问题源于button和:before之间的区别，特别是关于CSS伪元素的行为方式。

这是一个jsfiddle，展示了:before伪元素在两个看似相同的元素之间的行为方式。

button适用于input，但未应用于onclick。

https://jsfiddle.net/qcspe9qm/

我建议您将HTML按钮保留到位<button onclick="javascript:document.forms[0].submit();" >Login</button>：

<div id="theprogressbar" class="progress-bar progress-bar-u" 
     role="progressbar" aria-valuenow="75%" aria-valuemin="0" 
     aria-valuemax="100" style="width: 75%">

类似的东西。

Answer 4

您可以为ASP.NET按钮分配一个类，然后将所需的样式应用于它。

<asp:Button class="mybtn" Text="Button" runat="server"></asp:Button>

.mybtn
{
   border:1px solid Red;
   //some more styles
}

编辑：尝试对该课程使用display: none或!important，看看它是否有效。

Answer 5

webforms ASP.net按钮正在使用：

创建按钮

<input type="submit">

您给出的示例按钮使用以下方式呈现：

 <button type="submit">.

它们的功能相同，但我怀疑有CSS目标按钮而不是输入，这就是问题所在。

如果您注释掉ASP.net按钮并使用标签添加按钮，该怎么看？

CSS样式在asp.net Button中不起作用

5 个答案: