2014-03-31 2 views
0

제출 버튼을 변경하려고했지만 완전히 작동하지 않습니다. CSS에서CSS 제출 양식이 올바르지 않습니다.

내가 잘 작동하는 내 버튼이 있습니다

.button { 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
} 

을 그리고 내가 제출 유형을 생성 (분명히 코드는 동일) : 지금

input[type="submit"]{ 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
} 

내가 HTML을 생성하는 경우 페이지 :

<div class="button"> <a> Check Availability</a></div> 

<input type="submit" value="Send"/> 

<input type="submit" value="Submit" class="button" /> 
<div class="button"> <a> whats up</a></div> 

어필성에 많은 차이가 있습니다. 모든 버튼은 첫 번째 버튼과 네 번째 버튼처럼 보일 것입니다. 제출 버튼에이 테두리가있는 이유를 모르겠습니다. 서로 다른 보이는 이유입니다 Screenshot

Any ideas guys how can i fix it ? 
+0

단지 테두리를 지우고 싶다면 간단히'border : 0;'... – Digzol

답변

0

당신은 완전히 다른 두 가지 요소를 스타일링됩니다 다음은 스크린 샷입니다. input 요소에는 diva 요소에없는 기본 스타일이 있습니다.

요소를 검사하고 덮어 쓸 기본 스타일을 확인해야합니다. 스크린 샷의 기반으로,이 같은 일이 국경을 위해 일 수 있다는 추측에는 요 :

input[type="submit"]{ 
    ... 
    border:none; 
} 

http://jsfiddle.net/rD2Jz/

+0

을 추가하면됩니다. :) 감사합니다. :) –

-1

난 그냥이 추가 할 것입니다 그래서 나는 라이덴의 답변을 말씀 드릴 수 없습니다 :

스타일을 지정하는 요소에 이미 스타일이 추가되어있을 수 있습니다. css 파일이 페이지에서 마지막으로 호출 된 파일인지 확인하여 변경된 내용을 계산하십시오.

행운을 빈다.

+0

기본 스타일이 덮어 쓸 필요가 있다고 생각합니다. 고맙습니다 . –

1

input type = submit에 대한 스타일 지정과 같이 요소를 지정하면 클래스의 규칙을 거치므로 모든 입력 유형을 표준화하고 제출 한 다음 각 클래스를 추가로 양식화해야합니다 규칙.

귀하의 경우에는 입력 유형 = 제출 양식에 border : 0 none을 입력하면 제출할 때마다 테두리가 사라질 수 있습니다. 여기

내가 입력 적절한 상속하지 않고 [유형 = "제출"]로 깊은 스타일을 사용하는 데 좀 더 링크에 최적화 된 http://zip.net/bhmYLW

피를 설명한 코드입니다, 이것은 많은 문제가 발생할 수 있습니다.

관련 문제