как скрыть контур на форме

Question

Мне нужно спроектировать форму с входом внутри. Я использую фоновое изображение на входе, чтобы оно выглядело как кнопка. Каждый раз, когда кто-то щелкает по нему, он отправляет $ POST - поведение, которого я хочу достичь.

Но проблема в контуре формы. Контур показывает, когда мы нажимаем на форму. Это второстепенно, но было бы здорово, чтобы форма (или ввод) потеряла контур.

Я тестирую его, используя Firefox 3.6 и flock. Оба они показывают общее поведение, которого я хочу избежать.

<div id="hdrRight">     
    <form name="input"  action="/home.html"  method="post" id="buttonform" >
        <input type="submit" value="" id="gohome" />
    </form>

<blockquote>
#----- CSS part
#hdrRight {
    float:left; width:420px; 
    height:30px;  
    padding:0; 
    }

form#buttonform{
    background-color:transparent;
    border:none;
    clear:both;
    outline:none;
}

input#gohome{
    padding:0;
    margin:0;
    background-color:transparent;
    background-repeat:no-repeat;
    width:280px;
    height:60px;
    border:none;
    float:right;
    background-image: url('images/gohome.png');
    outline:none;
} 
input#gohome:hover  {
    background-image: url('images/gohome_hover.png');
    cursor:pointer;
    outline:none;
} </blockquote>

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

Answer 1

Вставьте это в свой CSS файл для сайта

form input
{
    border: none;
    outline: none;
}

И готово.

После Извлечение точечной улины :

Это стиль по умолчанию для цель доступности. Для людей без возможности использовать мышь, им все еще нужен какой-то визуальный индикатор что они в настоящее время имеют активную ссылку (так, например, они могут нажать Enter перейти по этой ссылке).

После локального создания небольшой тестовой страницы в Chrome отображается следующее:

Снимок экрана http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg

С помощью этого кода CSS (я добавил границы, чтобы видеть, где находится форма и где находится кнопка, обратите внимание, что Lorem Ipsum находится внутри формы):

#hdrRight {
        float:left; width:420px; 
        height:30px;  
        padding:0; 
        }

    form#buttonform{
        background-color:transparent;
        border:1px solid black;
        clear:both;
        outline:none;
    }

    input#gohome{
        padding:0;
        margin:0;
        background-color:transparent;
        background-repeat:no-repeat;
        width:280px;
        height:60px;
        border:1px solid black;
        float:right;
        background-image: url('images/gohome.png');
        outline:none;
    } 
    input#gohome:hover  {
        background-image: url('images/gohome_hover.png');
        cursor:pointer;
        border: 1px solid blue;
        outline:none;
    }

Answer 2

На самом деле, «контур: нет»; работает только для тегов привязки, но не для тегов ввода или тегов кнопок (попробуйте проверить пример HTML-страницы в Firefox, если вы мне не верите).

Поскольку рассматриваемый браузер - Firefox, для этого есть специальное правило для браузера.

input::-moz-focus-inner { border: 0; }

Answer 3

Appy ...

border: none;

на ваш вход