HTML/CSS ввода Кнопка Styling не работает

У меня есть кнопка:HTML/CSS ввода Кнопка Styling не работает

enter image description here НА

enter image description here OFF

Вот CSS:

.searchButton { 
    height: 31px; 
    width: 33px; 
    cursor: pointer; 
    border: none; 
    background:url(../img/searchButton-Off.png) no-repeat; 
} 

.searchButton:hover { 
    height: 31px; 
    width: 33px; 
    cursor: pointer; 
    border: none; 
    background:url(../img/searchButton-On.png) no-repeat; 
}

Вот HTML:

<div class="searchBox"> 
    <h2 style="color:000000;">Search</h2> 
    <form id="form_297586" class="appnitro" method="get" action="results.php"> 
     <input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/> 
     <input type="button" class="searchButton" /> 
     <input type="hidden" name="form_id" value="297586" /> 
    </form> 
    </div>

Вот что делает мой браузер:

enter image description here Safari Opera

Когда я наведите курсор мыши на кнопку, она правильно переключения, а затем отобразит кнопку целиком. Я не уверен, почему такое поведение происходит.

Мысли?

источник

2012-04-17 Jon

Мое первое предположение, что что-то идет не так со стилями, а ширина текста кнопки используется вместо ширины, которую вы определяете в своей таблице стилей.Что произойдет, если вы установите значение на кнопке для ввода текста, например 'value =" test "?? –

Прекрасно работает в Opera, Chrome и Firefox: http://jsfiddle.net/j08691/63Lt7/. BTW Я бы использовал спрайт здесь, чтобы предотвратить мерцание изображения. – j08691

Как бы это сделать с помощью спрайтов CSS? Я относительно новичок в CSS, поэтому у меня нет опыта с ними. – Jon

Кнопки имеют много по умолчанию стиля, прикрепленного к ним. Рассмотрим реализацию таблицы стилей сброса, как:

Eric Meyer's Reset

Normalize.css

Кроме того, элемент должен быть установлен на display: block или дисплее: inline-block для того, чтобы размеры, чтобы иметь возможность устанавливать на нем.

Наконец, я рекомендую вам привести упрощенный пример вашей проблемы в JSFiddle или Dabblet, чтобы людям было легче помочь вам.

Надеюсь, это поможет!

EDIT: Теперь, когда я вижу ваш пример, проблема заключается в том, что стили по умолчанию в bootstrap.css имеют более высокую специфичность, чем ваши стили. Что-то вроде:

input.searchButton

Должно решить проблему.

источник

2012-04-17 18:33:06

class = "button.searchButton"? – Jon

Получил! Огромное спасибо. Я подумал, что это что-то вроде этого. – Jon

background: url ("../ img/searchButton-Off.png") white no-repeat 9px;

просто изменить 9px к любому рху и сделать это, соответственно, а также увеличение высоты: 50px веса: 50px

источник

2012-04-17 18:25:09

Нет кубиков ... все еще не работает. – Jon

@ Jon-вы можете поместить этот код на jsfiddle.net, и я отредактирую на нем –

Высота и ... Вес? –

Это, вероятно, случай специфичность, где более конкретный набор условий, имеющим приоритет.

Попробуйте это:

.searchButton { 
    height: 31px !important; 
    width: 33px !important; 
    cursor: pointer; 
    border: none; 
    background:url(../img/searchButton-Off.png) no-repeat; 
}

Или вы могли бы попробовать:

form.appnitro .searchButton {

источник

2012-04-17 18:32:55

! Важное похоже работа. Я все еще собираюсь задуматься над тем, чтобы сделать это спрайтом, но это было исправлено независимо от проблемы. Благодаря! – Jon

HTML/CSS ввода Кнопка Styling не работает

ответ

Смежные вопросы