CSS로 제출 버튼의 스타일을 지정하려면 어떻게해야합니까?

Question

그래서 제출 버튼을 다른 입력 필드와 다른 너비로 설정합니다. 이 작업을 수행하려고하지만 제출 단추의 너비는 여전히 동일합니다. 도와주세요!

 #logon { 
     position: absolute; 
     margin-left: 60%; 
     top: 10px; 

    } 
    #logon input { 
     display: inline; 
    border: 1px solid #d1d1d1; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #bebebe; 
width: 150px; 
padding: 6px 15px 6px 35px; 

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 

    } 
     #logon input.button { 
     display: inline; 
    border: 1px solid #d1d1d1; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #bebebe; 
width: 50px; 
padding: 6px 15px 6px 35px; 

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 

    } 

그리고 내 HTML :

 <div id="logon"><form action="login_r.php" method="POST"> <input name="myusername" type="text" size="40" placeholder="Username..." /> <input name="mypassword" type="password" size="40" placeholder="Password..." /><input type="button" value="Log In"></form></div> 

Answer 1

올바른 속성 선택은 다음과 같습니다

#logon input[type='button'] 

그러나, 당신이 양식을 제출하는 경우, 당신이 그가 가지고하지 않는 것

#logon input[type='submit'] 

Answer 2

.button 선택은 클래스 "버튼"을위한 여기 내 CSS입니다. 귀하의 <input> 요소에 클래스가 없습니다. 이 시도 할 수 있습니다 : 그것은 콘텐츠의 측면 (작은 아이콘 같은 것들 등)에 더 많은 유연성 때문에

input[type=button] { whatever } 

는 개인적으로 내가 <input type=submit>보다 <button type=submit>을 좋아한다.