CSS để ẩn giá trị đầu vào nút văn bản

Question

Tôi hiện đang tạo kiểu tóc một yếu tố <input type='button'/> với CSS sau đây:

background: transparent url(someimage); 
color: transparent; 

Tôi muốn nút để hiển thị như một hình ảnh, nhưng tôi không muốn các văn bản value để hiển thị trên đầu trang của nó. Điều này làm việc tốt cho Firefox như mong đợi. Tuy nhiên, trên Internet Explorer 6 và Internet Explorer 7 tôi vẫn có thể xem văn bản.

Tôi đã thử tất cả các loại thủ thuật để ẩn văn bản nhưng không thành công. Có một giải pháp để làm cho Internet Explorer hoạt động?

(Tôi đang bị hạn chế sử dụng type=button bởi vì đây là một hình thức Drupal và hình thức API của nó không hỗ trợ hình ảnh-type.)

Answer 1

Tại sao các bạn bao gồm các thuộc tính value ở tất cả? Từ bộ nhớ, bạn không cần phải xác định nó (mặc dù các tiêu chuẩn HTML có thể nói bạn làm - không chắc chắn). Nếu bạn cần thuộc tính value, tại sao không chỉ là trạng thái value=""?

Nếu bạn thực hiện phương pháp này, CSS của bạn sẽ cần các thuộc tính bổ sung cho chiều cao và chiều rộng của hình nền.

Answer 2

Bạn đã thử đặt thuộc tính thụt lề văn bản thành cái gì đó như -999em chưa? Đó là một cách hay để 'ẩn' văn ​​bản.

Hoặc bạn có thể đặt kích thước phông chữ thành 0, cũng sẽ hoạt động.

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Answer 3

tôi đã có vấn đề ngược lại (làm việc trong Internet Explorer, nhưng không phải trong Firefox). Đối với Internet Explorer, bạn cần thêm phần đệm trái và đối với Firefox, bạn cần thêm màu trong suốt. Vì vậy, đây là giải pháp kết hợp của chúng tôi cho một 16px x 16px biểu tượng nút:

input.iconButton 
{ 
    font-size: 1em; 
    color: transparent; /* Fix for Firefox */ 
    border-style: none; 
    border-width: 0; 
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */ 
    text-align: left; 
    width: 16px; 
    height: 16px; 
    line-height: 1 !important; 
    background: transparent url(../images/button.gif) no-repeat scroll 0 0; 
    overflow: hidden; 
    cursor: pointer; 
} 

Answer 4

Áp dụng font-size: 0.1px; nút làm việc cho tôi trong Firefox, Internet Explorer 6, Internet Explorer 7 và Safari. Không có giải pháp nào khác mà tôi đã tìm thấy hoạt động trên tất cả các trình duyệt.

Answer 5

tốt:

font-size: 0; line-height: 0;

công việc tuyệt vời đối với tôi!

Answer 6

tôi sử dụng

button {text-indent:-9999px;} 
* html button{font-size:0;display:block;line-height:0} /* ie6 */ 
*+html button{font-size:0;display:block;line-height:0} /* ie7 */ 

Answer 7

này hoạt động trong Firefox 3, trình duyệt Internet Explorer 8, trình duyệt Internet Explorer 8 chế độ tương thích, Opera, và Safari.

* Lưu ý: ô bảng có chứa số này là padding:0 và text-align:center.

background: none; 
background-image: url(../images/image.gif); 
background-repeat:no-repeat; 
overflow:hidden; 
border: NONE; 
width: 41px; /*width of image*/ 
height: 19px; /*height of image*/ 
font-size: 0; 
padding: 0 0 0 41px; 
cursor:pointer; 

Answer 8

overflow:hidden và padding-left đang hoạt động tốt cho tôi.

Đối với Firefox:

width:12px; 
height:20px; 
background-image:url(images/arrow.gif); 
color:transparent; 
overflow:hidden; 
border:0; 

Đối với IES:

padding-left:1000px; 

Answer 9

color:transparent; và sau đó tài sản text-transform bất kỳ hiện các trick quá.

Ví dụ:

color: transparent; 
text-transform: uppercase; 

Answer 10

color:transparent; /* For FF */ 
*padding-left:1000px ; /* FOR IE6,IE7 */ 

Answer 11

tôi đã có vấn đề rất giống nhau. Và như nhiều bài viết khác được báo cáo: thủ thuật đệm chỉ hoạt động cho IE.

font-size:0px vẫn hiển thị một số chấm nhỏ.

Điều duy nhất mà làm việc đối với tôi là làm ngược lại

font-size:999px 

... nhưng tôi chỉ có nút của 25x25 pixel.

Answer 12

Sự khác biệt một số bạn đang thấy trong các giải pháp hoạt động hoặc không có trong các trình duyệt IE khác nhau có thể do bật hoặc tắt chế độ tương thích. Trong IE8, văn bản thụt lề chỉ hoạt động tốt trừ khi chế độ tương thích được bật. Nếu chế độ tương thích được bật, sau đó kích thước phông chữ và chiều cao dòng làm thủ thuật nhưng có thể làm hỏng màn hình của Firefox.

Vì vậy, chúng ta có thể sử dụng một css Hack để cho firefox bỏ qua quy tắc tức của chúng tôi .. như vậy ...

text-indent:-9999px; 
*font-size: 0px; line-height: 0; 

Answer 13

Sử dụng báo cáo có điều kiện ở phía trên cùng của tài liệu HTML:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> 

Sau đó, trong CSS, hãy thêm

.ie7 button { font-size:0;display:block;line-height:0 } 

Lấy từ khay hơi HTML5 - cụ thể hơn paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Answer 14

Tôi có điều này ghi nhận từ một nơi nào:

thêm text-transform nhập để xoá bỏ nó

input.button { 
    text-indent:-9999px; 
    text-transform:capitalize; 
} 

Answer 15

Thay vào đó, chỉ cần làm một hook_form_alter và làm cho các nút một nút hình ảnh và bạn đã làm xong!

Answer 16

Viết thư cho file CSS của bạn:

#your_button_id 
    { 
     color: transparent; 
    } 

Answer 17

này sau đây đã làm việc tốt nhất cho tôi:

HTML:

<input type="submit"/> 

CSS:

input[type=submit] { 
    background: url(http://yourURLhere) no-repeat; 
    border: 0; 
    display: block; 
    font-size:0; 
    height: 38px; 
    width: 171px; 
} 

Nếu bạn không đặt value trên <input type="submit"/>, nó sẽ đặt văn bản mặc định "Gửi" bên trong nút của bạn. SO, chỉ cần đặt font-size: 0; khi bạn gửi và sau đó đảm bảo bạn đặt height và width cho loại đầu vào của bạn để hình ảnh của bạn hiển thị. KHÔNG quên truy vấn phương tiện truyền thông cho bạn nộp nếu bạn cần đến chúng, ví dụ:

CSS:

@media (min-width:600px) { 
    input[type=submit] { 
    width:200px; 
    height: 44px; 
    } 
} 

Điều này có nghĩa khi màn hình là chính xác 600px rộng hoặc cao hơn vào nút sẽ thay đổi nó kích thước