我正在使用一个响应式主题。我正面临着输入表单的问题。在桌面视图中,输入将没有占位符,但有标签。但是,当谈到移动的视图时,我将隐藏这个输入标签,并使用占位符更改这个标签。
<input name="name" type="text" placehoder="insert your name">
如何用CSS隐藏这个占位符?
mm9b1k5b1#
这将仅隐藏台式机(和大型平板电脑)的占位符:
@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; } input::placeholder { 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; } textarea::placeholder { color: transparent; } }
Check it on Codepen.
t98cgbkg2#
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
rseugnpd3#
您可以使用媒体查询,并根据所需的分辨率隐藏和显示:
/* 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; }
klh5stk14#
使输入域和占位符文本的颜色相同。在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; } }
omvjsjqw5#
你应该用JS
$(window).resize(function(){ if ($(window).width() >= 600){ $(':input').removeAttr('placeholder'); } });
jv4diomz6#
<input name="name" type="text" id="id_here" placeholder="Your Label">
在桌面视图中隐藏占位符
input::-moz-placeholder { opacity: 0; }
或
input::-moz-placeholder { color:white; }
1.如果不想更改网站中的所有输入,请将input(或textarea)更改为#id_here或类名1.用于不同的浏览器
9nvpjoqh7#
此代码/css仅在焦点上显示'placeholder':
:not(:focus)::-webkit-input-placeholder { /* WebKit browsers */ color: transparent; } :not(:focus):-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: transparent; } :not(:focus)::-moz-placeholder { /* Mozilla Firefox 19+ */ color: transparent; } :not(:focus):-ms-input-placeholder { /* Internet Explorer 10+ */ color: transparent; }
7条答案
按热度按时间mm9b1k5b1#
这将仅隐藏台式机(和大型平板电脑)的占位符:
Check it on Codepen.
t98cgbkg2#
CSS只提供了样式,它不能删除实际的占位符.
你可以做什么,设置占位符文本颜色作为你的文本框的背景色,所以它会看起来像你没有占位符。
检查the fiddle
rseugnpd3#
您可以使用媒体查询,并根据所需的分辨率隐藏和显示:
普通样式
klh5stk14#
使输入域和占位符文本的颜色相同。在css中没有其他方法。
omvjsjqw5#
你应该用JS
jv4diomz6#
在桌面视图中隐藏占位符
或
1.如果不想更改网站中的所有输入,请将input(或textarea)更改为#id_here或类名
1.用于不同的浏览器
9nvpjoqh7#
此代码/css仅在焦点上显示'placeholder':