Как установить стиль css для кнопки asp.net?

У меня есть кнопка asp:, я использовал стили css со свойством cssClass в asp:Button, но эти стили не работают. Когда я использую asp:LinkButton, эти стили работают хорошо. Мне не нужны темы или скины для стилей.

Это моя страница asp:

<asp:Button CssClass="smallButton" Text="Sign In" runat="server" ID="submit"></asp:Button>

Это мой CSS:

.smallButton 
{
  //styles
}

Когда я меняю asp: Button на asp: LinkButton

<asp:LinkButton Text="Sign In" runat="server" ID="submit" CssClass="smallButton"></asp:LinkButton>

or 

<span class="smallButton"><asp:LinkButton Text="Sign In" runat="server" ID="submit"></asp:LinkButton></span>

стили работают хорошо. Единственная проблема с asp: Button control


button css asp.net aspbutton
person Sujanth    schedule 29.08.2012    source источник
comment
пожалуйста, покажите нам код. Как вы ожидаете, что мы угадаем, что вы сделали не так?   -  person Steve B    schedule 29.08.2012
comment
Можете ли вы предоставить html, который генерирует кнопка asp.net.   -  person Erwin    schedule 29.08.2012
comment
@Sujanth Если ответы вам помогли, вы должны принять это. Спасибо.   -  person Priyank Patel    schedule 29.08.2012
comment
Спасибо всем, я нашел решение и добавляю ниже этот код ...   -  person Sujanth    schedule 03.09.2012
comment
Это старый, но если кто-то столкнется с этим, в моем случае часть css в классе не работает для кнопки, поэтому он проигнорировал это проигнорировал. Это решило проблему для меня.   -  person Steve    schedule 09.11.2017

Ответы (8)


arrow_upward
17
arrow_downward

Вы можете присвоить class кнопке ASP.NET, а затем применить к ней желаемый стиль.

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

CSS:

.mybtn
{
   border:1px solid Red;
   //some more styles
}
person Priyank Patel    schedule 29.08.2012
comment
Я использую тот же способ, но это не работает для элемента управления asp: Button, но он работает с элементами управления asp: LinkButton и Image Button - person Sujanth; 29.08.2012
comment
@Sujanth Может быть, вы можете попробовать очистить кеш в браузере и попробовать еще раз. Код в порядке. - person Priyank Patel; 30.08.2012
comment
Осторожнее с этим. ASP.Net перезапишет поле CSS. Например, если вы отключите кнопку, класс css будет перезаписан на disabled. Используйте предоставленный установщик CssClass, чтобы ASP.Net мог координировать установку классов css. - person Timothy Gonzalez; 25.07.2016

arrow_upward
14
arrow_downward

Кодировку нашел ...

 input[type="submit"]
    {
     //css coding
    }
 input[type="submit"]:Hover  
    {
     //css coding
    }

Это решение моей проблемы ..... Спасибо всем за ценные ответы .......

person Sujanth    schedule 03.09.2012

arrow_upward
14
arrow_downward

Вы можете использовать атрибут CssClass и передать значение как имя класса css

<asp:Button CssClass="button" Text="Submit" runat="server"></asp:Button>` 

.button
{
     //write more styles
}
person Shankar Gupta    schedule 29.08.2012
comment
Это ожидаемый способ asp - person chingNotCHing; 24.09.2019

arrow_upward
8
arrow_downward

никто не хочет отвлекаться от использования класса, попробуйте следующее:

<asp:button Style="margin:0px" runat="server" />

Intellisense не предложит этого, но выполнит свою работу без ошибок, предупреждений или сообщений. Не забудьте заглавную букву S в стиле

person Stephen DuMont    schedule 11.03.2015
comment
Проголосовали против. Удачи в проведении технического обслуживания / капитального ремонта. С классом у вас будет хотя бы одна точка перемены. - person Spikee; 18.04.2018

arrow_upward
2
arrow_downward

Если у вас есть кнопка на странице дизайна asp.net, например «Default.asp», и вы хотите создать файл CSS и указанные атрибуты для кнопки, меток или другого контроллера. Затем сначала создайте страницу css

  1. Щелкните правой кнопкой мыши Project
  2. Добавить новый элемент
  3. Выберите таблицу стилей

теперь у вас есть страница css, теперь напишите этот код на своей странице css (StyleSheet.css)

StyleSheet.css

.mybtnstyle
{
 border:1px solid Red;
 background-color:Red;
 border-style:groove;
 border-top:5px;
 outline-style:dotted;
}

Default.asp

{

  <head> 
  <title> testing.com </title>
 </head>
<body>
 <b>Using Razer<b/>
<form id="form1" runat="server">
 <link id="Link1" rel="stylesheet" runat="server" media="screen" href="Stylesheet1.css" />
 <asp:Button ID="mybtn" class="mybtn" runat="server" Width="339px"/>
 </form>
 </body>
</html>

}

person Pir Fahim Shah    schedule 11.02.2014

arrow_upward
1
arrow_downward

Вы можете просто стилизовать элемент ввода в вашем файле css. Тогда это не зависит от ASP.NET.

<form action="">
    Name: <input type="text" class="input" />
    Password: <input type="password" class="input" />
    <input type="submit" value="Submit" class="button" />
</form>
CSS
.input {
    border: 1px solid #006;
    background: #ffc;
}
.button {
    border: 1px solid #006;
    background: #9cf;
}

С CssClass вы можете присвоить ему класс "input".

person Remy    schedule 29.08.2012
comment
Но тогда вы не используете серверные элементы управления, и мы не уверены, что это то, чего здесь хочет пользователь. - person Steve; 29.08.2012
comment
Это в основном то, что здесь предлагали все остальные. - person Remy; 29.08.2012
comment
Все здесь использовали серверные элементы управления в своих примерах. Не придираюсь, но asp.net не зря использует элементы управления сервером. Конечно, вы могли бы добавить к этим элементам управления тег runat и вуаля. - person Steve; 29.08.2012

arrow_upward
0
arrow_downward

Упомянутый вами ответ будет применен ко всем кнопкам. Вы должны попробовать это:

input[type="submit"].someclass {
    //somestyle}

И не забудьте добавить это к своей кнопке:

CssClass="someclass"
person Nandolcs    schedule 19.03.2013

arrow_upward
0
arrow_downward 

<asp:LinkButton ID="mybutton" Text="Link Button" runat="server"></asp:LinkButton>

С эффектами наведения:

 #mybutton
        {
            background-color: #000;
            color: #fff;
            font-size: 20px;
            width: 150px;
            font-weight: bold;
        }
        #mybutton:hover
        {
            background-color: #fff;
            color: #000;
        }

http://www.parallelcodes.com/asp-net-button-css/

person hitesh vikani    schedule 04.07.2015