Введите CSS с отображением границ в Chrome, Safari и Internet Explorer и без текста

Question

Я использую этот вход

<input src="img/buttons1.png" name="submit" class="submit1" type="image" value="See Today's Date Deal" tabindex="502" />

и вот это css

.submit1 {
              display: block;
              width: 250px;
              height: 28px;
              background: url(img/buttons1.png) no-repeat 0 0;
              padding-top: 12px;
              text-align: center;
              font-size: 17px !important;
              color:#fff; 
              border:0;
              outline:none;
}

В Firefox выглядит великолепно, но в Chrome, Safari и Internet Explorer это
Я хочу удалить границу и показать текст.

Любое предложение было бы замечательно! Спасибо

Answer 1

Вы использовали как свойство фона CSS, так и атрибут src в <input>.Ссылка src недействительна, поэтому в браузере отображается заполнитель разорванного изображения.Это выглядит по-разному в каждом браузере, который является границей и небольшим знаком вопроса, который вы видите.IE показывает маленький красный крест и границу.

Либо сделайте его <input type="submit"/> и используйте свойство фона CSS, либо используйте <input type="image" src=""/>

См. это демо , где первая кнопка имеетнеработающий атрибут src, который отображает заполнитель, а также фоновое изображение CSS.Принимая во внимание, что вторая кнопка - это кнопка отправки без src и только правильный URL-адрес для фонового изображения.

Редактировать: Об этом уже спрашивали: Как изменить изображение кнопки ввода с помощью CSS? и input type = "image" показывает нежелательную границу в Chrome и неработающую ссылку в IE7

Answer 2

вот что вводится в форме:

<input type="submit" id="submit" class="submit-btn" style="margin-top:5px" border="0" value="&nbsp;">

, а вот мой CSS:

.submit-btn {
    background: url("images/submit.png") no-repeat 0 0 transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}
.submit-btn:hover {
background: url("images/submit.png") no-repeat 0 -35px transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}

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

Answer 3

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

Answer 4

Я тоже искал решение этой проблемы.

Можно специально хотеть <input type="image">, потому что таким образом можно иметь две кнопки отправки в одной форме. Причина использования фонового изображения i.s.o. Атрибутом src является Sprite. (смещение фона при наведении).

Когда вы хотите все это, вам все равно нужно использовать действительный атрибут src, поскольку ожидается - по крайней мере, Chrome - избавиться от этой линии вокруг ввода, которая не является границей или контуром. Поэтому я использую прозрачный gif размером 1 пиксель для атрибута src, чтобы удовлетворить Chrome.

Answer 5

Вы пробовали установить границу: 0px вместо 0?

Answer 6

Может быть, вы должны использовать type = "button". Код будет:

<input name="submit" class="submit1" type="button" value="See Today's Date Deal" tabindex="502" />

И CSS останется как есть.