Применение CSS к .NET ImageButton - PullRequest
Новая
       18

Применение CSS к .NET ImageButton

1 голос
/ 14 апреля 2011

У меня есть следующий CSS, который я могу применить к тегу ввода HTML. 

#headerSearch
{
    width: 265px;
}

#headerSearch .text
{
    width: 215px;
}

#headerSearch #searchButton
{
    background: url(../images/searchButton.png) no-repeat 0 0;
    width: 36px;
    border: 1px solid #ccc;
    margin: 0;
}

#headerSearch #searchButton:hover
{
    background: url(../images/searchButton.png) no-repeat 0 -28px;
}

И HTML, к которому я его применяю ... 

<div id="headerSearch" class="float">
  <input id="txtSearch" class="text left" type="text" />
  <input id="searchButton" class="submit right" type="submit" value="" />
</div>

Прекрасно работает.

Однако я хочу использовать элемент управления ImageButton вместо тега input, потому что я хочу, чтобы поведение ImageButton отправлялось страницей (которое происходит, когда вы нажимаете на него и возникает событие click и т. Д.), Но я не уверен как смешивать CSS с помощью ImageButton. Я пробовал что-то простое, как 

<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />

, но при этом изображение отображается с красным крестиком в белом поле (по умолчанию изображение отсутствует значок) поверх него.

Итак, более кратко, как мне смешать элегантный CSS с .NET ImageButton?

Ответы [ 3 ]

1 голос
/ 14 апреля 2011

на основе примера кода, для которого вы установили <asp:ImageButton /> CssClass равным "searchBtn", но для .searchBtn

нет CSS

возможно, добавьте это к вашему CSS 

.searchBtn {
    background: url(../images/searchButton.png) no-repeat 0 0;
    border: 1px solid #ccc;
    margin: 0;
}

.searchBtn:hover {
    background: url(../images/searchButton.png) no-repeat 0 -28px;
}

и <asp:ImageButton /> рендерит до <input type="image" name="ibtnSrch" id="ibtnSrch" class="searchBtn" src="" alt="Search" style="border-width:0px;" />

, поскольку элемент управления является входным изображением без источника изображения, поэтому вы получаете красный x

1 голос
/ 14 апреля 2011

Если вы измените свой стиль searchButton на класс, то вы можете просто использовать <asp:Button>

<asp:Button ID="ibtnSrch" runat="server" 
            CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />

Затем вы можете поместить эту кнопку в отдельную ValidationGroup или установите CausesValidation="false".

Если вы хотите сохранить все это на стороне клиента и выполнить перенаправление на страницу поиска в JavaScript, но также хотите воспользоваться проверкой ASP.NET, на которой вы настроиливаши элементы управления, вы можете использовать клиентскую проверку ASP.NET .

0 голосов
/ 14 апреля 2011

Короче я бы не использовал кнопку asp image.

Я бы использовал ваши текущие элементы управления html, а затем добавил бы некоторый javascript, чтобы щелкнуть по скрытому элементу asp: Button, когда вы нажимаете кнопку ввода.правильный синтаксис для получения идентификатора клиента ...

...