Nút gửi có bevel Tôi không thể loại bỏ

Question

Tôi đang cố gắng loại bỏ đường viền mặc định và đường viền mà hầu hết các trình duyệt/HĐH đã đặt làm mặc định trên nút Gửi. Khi tôi sử dụng CSS để thêm hình nền, nó chỉ hiển thị hình ảnh trong nền của nút nhưng bevel vẫn còn đó. Có cách nào để làm cho nút chỉ hiển thị hình ảnh của tôi không? Là cách duy nhất để làm điều đó để thiết lập đường dẫn hình ảnh trong thẻ src của phần tử đầu vào html?

Answer 1

Bạn sẽ cần phải loại bỏ các biên giới (côn) như sau:

input { 
    border: 0; 
} 

Answer 2

Bạn có thể thiết lập biên giới thuộc tính trong CSS. Tôi luôn luôn nghĩ rằng

border: 1px solid black; 

có vẻ đẹp.

Answer 3

Tôi không khuyên bạn nên thay đổi giao diện của nút vì nó sẽ không nhất quán với cách các nút khác trên trang web trông và sẽ khó khăn hơn cho người dùng tìm và nhận dạng dưới dạng nút gửi. Nếu bạn thực sự muốn tiếp tục, tôi khuyên bạn nên làm một bài kiểm tra khả năng sử dụng.

Answer 4

Nếu bạn muốn sử dụng hình ảnh nút riêng của bạn, sau đó bạn sẽ cần phải định nghĩa các nút riêng của bạn, như thế này:

<div class="button"> 
    <a href="#">Login</a> 
</div> 

Và CSS:

div.button 
{ 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background: url(button_right_normal.gif) no-repeat right top; 
} 

div.button a 
{ 
    position: relative; 
    display: block; 
    margin: 0; 
    border: 0; 
    padding: 2px 15px 5px 15px; 
    height: 18px; 
    background: url(button_left_normal.gif) no-repeat left top; 
    color: #ffffff; 
    font-size: 11px; 
    text-decoration: none; 
} 

Answer 5

Bạn có thể loại bỏ biên giới sử dụng thuộc tính CSS đường viền. Ví dụ:

<input type=button value="Hello" style="border:0"> 

(Bạn có thể dĩ nhiên di chuyển này vào stylesheet của bạn.)

Answer 6

Bạn có thể giống như sau một stylesheet (hoặc trong vòng tại <style>...</style> thẻ trên trang) và sử dụng một số CSS tiên tiến bộ chọn:

input[type=submit], input[type=button], /* Advanced CSS selectors */ 
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */ 
{ 
    border: 0; 
    background-image: url("/images/foo.png"); 
} 

Answer 7

Lưu ý rằng Safari rất cứng đầu với nút gửi kiểu.

<button type="submit"></button> 

Linh hoạt hơn. Tuy nhiên, nếu bạn đang sử dụng nhiều nút trong một biểu mẫu, IE6 có vấn đề. IE cũng đệ trình innerHTML của phần tử nút, trong khi Firefox gửi thuộc tính value (điều này có ý nghĩa hơn đối với tôi).

Answer 8

tôi nghĩ rằng bạn có thể chỉ định cách nút và nút gửi như sau:

input[type=button], input[type=submit] { border: 0 } 

Answer 9

Bạn có thể sử dụng bất kỳ img như nền (ví dụ góc tròn trong suốt), chỉ trong add css "background-color: trong suốt;"

HTML (tiêu chuẩn chính thức vào nút "submit") - không có gì đặc biệt (tôi không thích trộn mã với phong cách):

<input type="submit" name="submit" id="mystyle" value="send e-mail"/> 

sau đó trong css (giống như một liên kết bình thường ngoại trừ giết biên giới, và mặc định nền)

#mystyle { 
background-color: transparent; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
} 

Nếu không có CSS ​​như nút gửi chính thức, với CSS bạn đã thiết kế.

Đã kiểm tra: Chrome, IE, Opera

Answer 10

Tôi gặp sự cố tương tự đối với các nút đầu vào. Đối với một lần IE8 đã xuất hiện như tôi muốn "out-of-the-box" và nó đã được Chrome mà thất vọng!

Các CSS mà đã làm các trick đối với tôi là:

input[type="button"] { 
    border: 0; 
    border-width: 2px; 
    border-color: white; 
    border-style: solid; 
} 

border: 0; loại bỏ các bevel 3D (phong cách biên giới), sau đó tôi thay thế nó bằng một biên giới tìm kiếm phẳng mà ám độc đáo trong cả IE8 và Chrome.