양식에 윤곽선을 숨기는 방법

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> 


         
 

  
          
#----- 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; 
}
         
 

왜 이런 일이 발생하고 개요를 숨기는 지 설명 할 수 있습니까? 사이트

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

그리고 수행에 대한 CSS 파일에

Answer 1

실제로 입력받는border: none;

"개요 : 없음;" 입력 태그 또는 버튼 태그가 아닌 앵커 태그에서만 작동합니다 (나를 믿지 않으면 Firefox에서 샘플 HTML 페이지를 테스트 해보십시오).

문제의 브라우저가 Firefox이기 때문에이를위한 브라우저 별 규칙이 있습니다.

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

Answer 2

삽입이. Removing The Dotted Ouline 다음

는 :

이 접근성의 목적으로 기본 스타일입니다. 마우스를 사용할 능력이없는 사람들 의 경우, 그들은 여전히 ​​어떤 링크가 활성화되어있는 (즉, 예를 들어 을 입력하여 해당 링크로 이동할 수 있음)의 시각적 표시기 을 필요로합니다.

로컬 작은 테스트 페이지를 만든 후, 나는 크롬에서 다음을 참조 : 내가 볼 수 있도록

이 CSS 코드와 Screen shot http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg

(나는 국경을 추가 곳 형태이며, 여기서 버튼을 로렘 입숨가) 형태로 내부에 있습니다입니다 :

#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 3

appy 수를 ...