Вопрос по css – проблема хромированной границы

4

У меня эта проблема только в Chrome. Как убрать границу вокруг изображения? пожалуйста, смотрите скрипку в Chrome.

<code><form>
    <input type="image" class="searchbox_submit search_btn" value="">
</form>
</code>
<code>form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
    outline: none;
}

.search_btn {
    background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
    height: 25px;
    width: 30px;
    outline: none;
    border: none;
    outline-width: 0;
    -webkit-appearance: none; 
}​
</code>

Demo: http: //jsfiddle.net/TXYg6

изменить тип с картинки для отправки khaled_webdev
Примечание: ваше изображение не в центре, оно должно быть шириной 30 пикселей, высотой 30 пикселей,url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -192px Travis J

Ваш Ответ

6   ответов
10

<input type="image" />, такa src атрибут ожидается. Вы не указали один, поэтому Chrome отображает серую рамку, таким же образом это дляimg безsrc атрибут.

Если ты хочешь использовать<input type="image" /> и используя CSS-спрайт, вам нужно будет указатьчто-т какsrc, например прозрачный "blank.gif" размером 1x1.

http: //jsfiddle.net/thirtydot/TXYg6/14

Впрочем, это просто ужасно. Вместо этого я рекомендую перейти на<input type="submit" />, который решает проблему.

Или альтернатива - просто использоватьtype="submit" так как по умолчаниюtype="image" также отправит форму. animuson♦
@ animuson: Это определенно лучшая альтернатива. Меняя мой ответ .. thirtydot
@ animuson - я думаю, что<button type="submit" /> еще лучше, поскольку у вас нет ввода, связанного с кнопкой. Madbreaks
@ Madbreaks: я не думаю, что есть такая вещь, какtype атрибут на<button> и кнопка не является самозакрывающимся тегом ... кроме того,<input type="submit" /> на самом деле не является вводом, если вы не дадите емуname. Ry-♦
@ minitech: есть, а по умолчанию отсутствует значениеsubmit. animuson♦
2

замени это так с типом отправки

<input type="submit" class="searchbox_submit search_btn" value="">

исправьте ваши css высоту и ширину

1

Дай пустое изображение какsrc с помощьюdata: URI. Поскольку вас интересует только Chrome, проблем нет:

<input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=">

http: //jsfiddle.net/TXYg6/23

1

вы можете установить тип ввода 'submit', и это исчезнет.

Альтернативно, используйте с src и инициируйте отправку из этого, но вы также можете просто использовать type = "submit"

Нежелательные хромированные рамки

0

image"? Потому что это то, что вызывает проблему ...

0

Семантически я бы сказал, используйтеbutton так как у вас на самом деле нет связанного входного значения, и поэтому онон вход:

<button type="submit" class="searchbox_submit search_btn"></button>

От Документы:

Buttons, созданные с помощью элемента BUTTON, функционируют так же, как кнопки, созданные с помощью элемента INPUT, но они предоставляют более широкие возможности рендеринга: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, функционирует как и может напоминать элемент INPUT, тип которого установлен на «image», но тип элемента BUTTON допускает контент.

Ура

Похожие вопросы