Bạn có thể tạo các nút biểu mẫu html bằng css không?

Question

Tôi không thích kiểu nút mặc định. Nó khá buồn tẻ. Tôi đang sử dụng

<input type="submit"> 

nút loại. Tôi có thể phong cách này bằng cách nào đó trong css? Nếu không, cách khác để làm nó tôi đoán sẽ được sử dụng một div thay vào đó, và làm cho nó một liên kết. Làm thế nào để bạn làm cho những người làm việc với các hình thức?

Answer 1

Bạn có thể đạt được mong muốn của bạn thông qua dễ dàng bằng CSS: -

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" /> 

CSS

#submit { 
    background-color: #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius:6px; 
    color: #fff; 
    font-family: 'Oswald'; 
    font-size: 20px; 
    text-decoration: none; 
    cursor: pointer; 
    border:none; 
} 



#submit:hover { 
    border: none; 
    background:red; 
    box-shadow: 0px 0px 1px #777; 
} 

DEMO

Answer 2

viết theo phong cách dưới đây vào cùng phần đầu tập tin html hoặc viết vào một tập tin .css

<style type="text/css"> 
.submit input 
    { 
    color: #000; 
    background: #ffa20f; 
    border: 2px outset #d7b9c9 
    } 
</style> 

<input type="submit" class="submit"/> 

.submit - trong css. nghĩa lớp, vì vậy tôi tạo trình lớp với tập các thuộc tính
và áp dụng lớp đó để tag nộp, sử dụng lớp thuộc tính

Answer 3

Yeah, nó khá đơn giản:

input[type="submit"]{ 
    background: #fff; 
    border: 1px solid #000; 
    text-shadow: 1px 1px 1px #000; 
} 

Tôi khuyên bạn nên cho nó một ID hoặc một để bạn có thể nhắm mục tiêu dễ dàng hơn.

Answer 4

Có, bạn có thể nhắm mục tiêu các đặc tính đó bằng cách sử dụng input[type=submit] ví dụ:

.myFormClass input[type=submit] { 
    margin: 10px; 
    color: white; 
    background-color: blue; 
} 

Answer 5

Bạn có thể trực tiếp tạo ra phong cách riêng của bạn theo cách này:

input[type=button] 
{ 
//Change the style as you like 
} 

Answer 6

Bạn có thể muốn thêm:

-webkit-appearance: none; 

nếu bạn cần nó nhìn nhất quán trên Mobile Safari ...