Làm cách nào để hiển thị nút gửi dưới dạng liên kết?

Question

này không được làm việc trong IE:

.text-button { background: transparent; 
       text-decoration: none; 
       cursor: pointer; } 



<input type="submit" class="text-button" value="vote+"/> 

Nó sẽ hiển thị một nút vuông.

Answer 1

sao chép từ link này bạn có thể làm cho nút của bạn trông giống như một liên kết -

.submitLink { 
 
    background-color: transparent; 
 
    text-decoration: underline; 
 
    border: none; 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
submitLink:focus { 
 
    outline: none; 
 
}

<input type="submit" class="submitLink" value="Submit">

Answer 2

thử điều này:

.text-button { 
border: none; 
background: transparent; 
cursor: pointer } 

Answer 3

Hãy thử điều này:

<style type="text/css"> 
    .text-button 
    { 
     background-color: Transparent;     
     text-decoration: underline;     
     color: blue; 
     cursor: pointer; 
     border:0 
    }  
</style> 
<input type="submit" class="text-button" value="vote+"/> 

Answer 4

<form name='test'> 
    <a href="javascript:document.forms['test'].submit()">As a link</a> 
</form> 

Answer 5

Bạn không thể làm điều đó với nút, vì những thứ như yếu tố đầu vào là các thành phần của trình duyệt và máy khách, chứ không phải mã CSS của bạn.

Bạn nên sử dụng thẻ <a href=""></a> liên kết đến đoạn mã javascript sau đó gửi biểu mẫu cho bạn.

Answer 6

IMO Tôi đoán tôi là một nhà phát triển khó xử lý. Tôi sẽ đề nghị cho người (s) yêu cầu ứng dụng này tùy chọn chỉ để cho nó vẫn là một nút?

Bạn/họ có cân nhắc những điều sau không?

1. Thực tiễn tốt nhất từ ​​quan điểm giao diện người dùng có sử dụng thứ gì đó không phải là nút để gửi biểu mẫu không?
2. Nếu bạn làm theo cách tiếp cận CSS, tôi không tin rằng Safari sẽ cho phép bạn thay đổi giao diện của một nút.
3. Nếu bạn sử dụng thẻ <a> với một số javascript, thì bạn có biểu mẫu không có nút gửi, điều này có thể gây ra đau đầu trong tương lai. Làm cách nào để phát hiện liên kết gửi của bạn từ các thẻ <a> khác dễ dàng?

Answer 7

Tôi tin rằng câu trả lời gửi ở trên bởi mofolo là chính xác hơn giải pháp

CSS styling của trình nút để làm cho chúng trông giống như thẻ neo không trình duyệt chéo. Văn bản-trang trí: gạch dưới phong cách được bỏ qua bởi nhiều loại trình duyệt.

Phương pháp tốt nhất trong trải nghiệm của tôi là sử dụng javascript trên sự kiện onclick của thẻ neo.

Ví dụ:

A "Delete" liên kết trên một chi tiết người dùng tạo màn hình, với xác nhận trước khi nộp mẫu đơn với một id của "userdetails"

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a> 

Answer 8

tôi cần phải chuẩn bị một bài chuyển hướng và vì những người dựa vào việc gửi biểu mẫu, tôi cần đặt một thứ gì đó trên chúng để làm cho chúng hoạt động ngay cả khi javascript không thành công vì một lý do nào đó. Nếu javascript không thành công thì một neo để gửi biểu mẫu sẽ không hoạt động. Tôi đã thực sự định dạng nút để trông giống như một liên kết (vì vậy trang chuyển hướng trông giống như một). Tôi dựa trên giải pháp của tôi về những gì Vishal đã viết, nhưng tôi đã thực hiện một số thay đổi nhỏ để làm cho nó trông tốt hơn nội tuyến. Đây là kết quả.

button 
 
{ 
 
    padding:0; 
 
    background-color:transparent; 
 
    text-decoration:underline; 
 
    border:none; 
 
    border:0; 
 
    color:blue; 
 
    cursor:pointer; 
 
    font-family:inherit; 
 
    font-size:inherit; 
 
} 
 

 
button::-moz-focus-inner 
 
{ 
 
    border:0; 
 
    padding:0; 
 
}

To complete the redirect <button>click here</button>.

Edit: Bí quyết để loại bỏ đệm trong FireFox được lấy từ here

Edit2: Made nút kế thừa kiểu font từ yếu tố phụ huynh để làm cho nó trông giống như một liên kết hợp lệ (trước đây kích thước phông chữ và họ phông chữ khác nhau đối với nút).