用css隱藏佔位符

Question

我正在使用響應式主題。我在這裏面對輸入表單問題。在桌面視圖中，輸入不會佔位符，但會有標籤。

但是，當涉及到移動視圖時，我將隱藏此輸入標籤並使用佔位符更改此標籤。

<input name="name" type="text" placehoder="insert your name"> 

我真正的問題在這裏很簡單。如何用css隱藏這個佔位符？

在此先感謝！

Answer 1

您可以使用媒體查詢和隱藏，並根據所需的分辨率顯示：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
     ::-webkit-input-placeholder { 
     color: lightgray !important; 
     } 
     :-moz-placeholder { /* Firefox 18- */ 
     color: lightgray !important; 
     } 

     ::-moz-placeholder { /* Firefox 19+ */ 
     color: lightgray !important; 
     } 

     :-ms-input-placeholder { 
     color: lightgray !important; 
     } 
     #labelID 
     { 
     display:none !important; 
     } 
} 

普通樣式

::-webkit-input-placeholder { 
     color: transparent; 
} 
:-moz-placeholder { /* Firefox 18- */ 
     color: transparent; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
     color: transparent; 
} 

:-ms-input-placeholder { 
     color: transparent; 
} 

#labelID{ 
     display:block; 
} 

Answer 2

這將隱藏僅適用於臺式機（大粒）的佔位符：

@media (min-width:1025px) and (min-width:1281px) { 
 

 
    ::-webkit-input-placeholder { /* WebKit browsers */ 
 
     color: transparent; 
 
    } 
 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
     color: transparent; 
 
    } 
 
    ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
     color: transparent; 
 
    } 
 
    :-ms-input-placeholder { /* Internet Explorer 10+ */ 
 
     color: transparent; 
 
    } 
 

 
    textarea::-webkit-input-placeholder { /* WebKit browsers */ 
 
     color: transparent; 
 
    } 
 
    textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
     color: transparent; 
 
    } 
 
    textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
     color: transparent; 
 
    } 
 
    textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ 
 
     color: transparent; 
 
    } 
 

 
}

This input has no placeholder on Desktops&nbsp;<input name="name" type="text" placeholder="insert your name">

Answer 3

<input name="name" type="text" id="id_here" placeholder="Your Label"> 

請在桌面視圖中的佔位符隱藏

input::-moz-placeholder { 
    opacity: 0; 
} 

OR

input::-moz-placeholder { 
    color:white; 
} 

1. 更改輸入（或文本域等等）來#id_here或類的名稱，如果你不想要改變網站上的所有輸入

2. 使用不同的瀏覽器

   -webkit-輸入佔位 -MS-輸入佔位 -moz-佔位

Answer 4

CSS只提供樣式，它不能刪除實際的佔位符。

你能做到什麼，設置佔位符文本顏色，文本框的背景顏色，所以它看起來就像你沒有佔位符..

::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #fff; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #fff; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #fff; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #fff; 
} 

檢查the fiddle

Answer 5

使雙方的輸入字段和佔位符文本相同的顏色。有沒有其他方式與CSS。

@media all and (max-width:736px){ 
    ::-webkit-input-placeholder { 
    color:white; 
    } 

    :-moz-placeholder { /* Firefox 18- */ 
    color:white; 
    } 

    ::-moz-placeholder { /* Firefox 19+ */ 
    color:white; 
    } 

    :-ms-input-placeholder { 
    color:white; 
    } 
    } 

Answer 6

你應該使用JS

$(window).resize(function(){ 
    if ($(window).width() >= 600){ 
     $(':input').removeAttr('placeholder'); 
    } 
});