CSS style not work in asp.net Button

Question

i want to make a login page, and i find a template from HERE.

When i replace the login <button> to <asp:Button>, the css style look like not being applied with this, why? And how to fix it?

There is my html code:

<%@ 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>

@odedta - please read the code before commenting. You can see that the OP has already done that using `login-button` — freefaller, Jun 04 '15 at 08:14
I can't see any obvious reason why the `login-button` styling wouldn't be implemented. Have you checked the rendered HTML, to make sure the browser is receiving `class="login-button"`? — freefaller, Jun 04 '15 at 08:16

score 2 · Answer 1 · edited May 23 '17 at 12:30

:before and :after render inside a container

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.

Refer this SO Answer

Douwe de Haan · Accepted Answer · 2015-06-04T11:02:28.037

1

Note that the HTML of the example you provided is different than the one you created.

Example:

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

Yours:

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

The example uses the :before and :after of the button to get the blue background, which the input does not have. So either you have to force it to be a button, or you can create a div or some other element around your input to get this result.

Edit:

Try this:

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

and change the padding of .login-button (line 213 of style.css) to padding: 0px;

Second edit: Delete the part of the .login-button:before (line 232 of style.css) and add the following:

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;
}

edited Jun 04 '15 at 11:02

answered Jun 04 '15 at 08:19

Douwe de Haan

6,247
1
30
45

Hi @Douwe de Haan, i think you're right, but i have no idea how to force it to be a button or create a div or some other element around my input. Can you give me some sample? Thanks for your reply. – Nicky Liu Jun 04 '15 at 08:39
@NickyLiu I added the code. I tried it at your example, I think this will work. – Douwe de Haan Jun 04 '15 at 08:58
Hi @Douwe de Haan, i tried your code, it look like this: http://nickydemo.azurewebsites.net/loginstyle/s1.aspx – Nicky Liu Jun 04 '15 at 09:05
@NickyLiu I changed the code and double checked it. See the change from p to div (.login-sumit) and the CSS change – Douwe de Haan Jun 04 '15 at 09:12
Hi @Douwe de Haan, i found another problem, when i input password, and press 'TAB' to focus login button, css style will disappear. http://nickydemo.azurewebsites.net/loginstyle/s1.aspx – Nicky Liu Jun 04 '15 at 10:10
Hi @Douwe de Haan, the extra edit have fixed the 'TAB' problem, but arrow icon disappear. Please see: http://nickydemo.azurewebsites.net/loginstyle/s1.aspx – Nicky Liu Jun 05 '15 at 09:51
@NickyLiu I'm not able to check, because I don't have a computer with me right now, but could the problem be in the z-index? – Douwe de Haan Jun 05 '15 at 11:39
Hi @Douwe de Haan, you are right, thank you very much. – Nicky Liu Jun 05 '15 at 13:51

score 1 · Answer 3 · answered Jun 04 '15 at 09:46

I think the problem is rooted in difference between input and button, specifically regarding how CSS pseudo-elements behave.

Here is a jsfiddle showing how the :before pseudo-element behaves differently across two seemingly identical elements.

The :before is applied to the button, but not the input.

https://jsfiddle.net/qcspe9qm/

I would suggest just leaving your HTML button in place and onclick:

<button onclick="javascript:document.forms[0].submit();" >Login</button>

something like that.

score 0 · Answer 4 · answered Jun 04 '15 at 08:16

You can assign a class to your ASP.NET Button and then apply the desired style to it.

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

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

EDIT: Try using display: none or !important for that class to see if it has any effect.

score 0 · Answer 5 · answered Jun 04 '15 at 08:19

0

The webforms ASP.net Button is creating the button using:

<input type="submit">

your given example the button is rendered using:

 <button type="submit">.

They will function the same, but I suspect that there's CSS targeting button instead of input and that's the problem.

How does it look if you comment out the ASP.net button and add in the button using the tag?

answered Jun 04 '15 at 08:19

John Mc

2,862
1
22
37

It is not a button they target, but the before and after pseudo elements. – Douwe de Haan Jun 04 '15 at 08:20
Hi @John MC, this is result for using html – Nicky Liu Jun 04 '15 at 08:36

CSS style not work in asp.net Button

5 Answers5