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="[email protected]"/>
        </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
– freefaller, Commented Jun 4, 2015 at 8: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
– freefaller, Commented Jun 4, 2015 at 8:16
Hi @freefaller, i checked it work by using html <button>, there is sample: nickydemo.azurewebsites.net/loginstyle/LoginWithHtmlButton.aspx — Nicky Liu
– Nicky Liu, Commented Jun 4, 2015 at 8:40

Community · Accepted Answer · 2017-05-23 12:30:00Z

2

: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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 4, 2015 at 8:39

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Douwe de Haan · Accepted Answer · 2015-06-04 11:02:28Z

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 4, 2015 at 11:02

answered Jun 4, 2015 at 8:19

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

7 Comments

Nicky Liu Over a year ago

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.

Douwe de Haan Over a year ago

@NickyLiu I added the code. I tried it at your example, I think this will work.

Nicky Liu Over a year ago

Hi @Douwe de Haan, i tried your code, it look like this: nickydemo.azurewebsites.net/loginstyle/s1.aspx

Douwe de Haan Over a year ago

@NickyLiu I changed the code and double checked it. See the change from p to div (.login-sumit) and the CSS change

Nicky Liu Over a year ago

Hi @Douwe de Haan, i found another problem, when i input password, and press 'TAB' to focus login button, css style will disappear. nickydemo.azurewebsites.net/loginstyle/s1.aspx

|

Glenn Ferrie · Accepted Answer · 2015-06-04 09:46:05Z

1

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.

answered Jun 4, 2015 at 9:46

Glenn Ferrie

10.4k3 gold badges46 silver badges77 bronze badges

Comments

odedta · Accepted Answer · 2015-06-04 08:16:38Z

0

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.

answered Jun 4, 2015 at 8:16

odedta

2,4785 gold badges26 silver badges57 bronze badges

Comments

John Mc · Accepted Answer · 2015-06-04 08:19:47Z

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 4, 2015 at 8:19

John Mc

2,9431 gold badge26 silver badges37 bronze badges

2 Comments

Douwe de Haan Over a year ago

It is not a button they target, but the before and after pseudo elements.

Nicky Liu Over a year ago

Hi @John MC, this is result for using html <button> nickydemo.azurewebsites.net/loginstyle/LoginWithHtmlButton.aspx

Collectives™ on Stack Overflow

CSS style not work in asp.net Button

5 Answers 5

Comments

7 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related