скрывать заполнитель с помощью css

23

Я работаю с отзывчивой темой. И здесь я сталкиваюсь с проблемой входной формы. В представлении рабочего стола вход не будет иметь место, но имеет метку.

Однако, когда дело доходит до мобильного представления, я скрою эту метку ввода и смените эту метку на placeholder.

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

Мой настоящий вопрос здесь так прост. Как скрыть этот заполнитель css?

Спасибо заранее!

    
задан iyal 12.06.2015 в 05:39
источник
  • , потому что CSS не может манипулировать атрибутом тега HTML. CSS может обеспечить стиль. вы можете использовать JavaScript / JQuery –  Deepak Sharma 12.06.2015 в 05:47
  • , если использовать css, нет способа сделать это –  Nhân Nguyễn 12.06.2015 в 05:48
  • , но вы можете попробовать одно. Установите цвет заполнителя в качестве цвета фона, чтобы он выглядел так, как будто у вас нет места для замещения. –  Deepak Sharma 12.06.2015 в 05:49
  • благодарит всех. все решения ниже, как шарм! –  iyal 12.06.2015 в 06:05

6 ответов

24

Это скроет местозаполнитель только для настольных компьютеров (и больших таблиц):

@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">
    
ответ дан Luca Fagioli 12.06.2015 в 05:51
  • , как это сделать с текстовым полем! –  iyal 12.06.2015 в 06:18
  • Отредактировал мой ответ, чтобы включить textarea. Попробуйте и дайте мне знать. –  Luca Fagioli 12.06.2015 в 22:10
  • и последний хром. –  Nick M 10.11.2017 в 08:42
  • кто-либо поймал, то есть в 2018 году, должен быть расстрелян –  CrackSmoker9000 04.01.2018 в 11:09
  • Вместо того, чтобы использовать цвет: прозрачный, просто используйте непрозрачность: 0, чтобы он работал в последних браузерах. –  Adam Reis 14.02.2018 в 20:48
16

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;
}

Отметьте скрипку

    
ответ дан Deepak Sharma 12.06.2015 в 05:52
  • Не могли бы вы пояснить, что вы имеете в виду в первом предложении, пожалуйста? Я не совсем понимаю это утверждение. –  Henders 23.09.2016 в 18:12
  • @Henders ..;) hahah это была просто опечатка, я хотел сказать, что css предоставляет только стиль –  Deepak Sharma 26.09.2016 в 05:10
  • Если ваш браузер поддерживает стилизацию заполнителя, он также поддерживает rgba (255,255,255,0). Ваше решение работает только для белых входов. –  Martijn 20.12.2016 в 12:04
  • Я пропускаю, почему вы не можете использовать отображение: none ;, opacity: 0; или видимость: скрытый ;? –  Edmund Reed 03.10.2017 в 05:43
  • @ Эдмунд, он попросил скрыть текст заполнителя. Не сам txtbox. Если вы будете использовать отображение, непрозрачность или видимость, он скроет сам txtbox. Но требования заключались в том, чтобы скрыть только текст заполнителя внутри txtbox. Надеюсь, что это имеет смысл. –  Deepak Sharma 04.10.2017 в 06:18
Показать остальные комментарии
3

Вы можете использовать медиа-запросы и скрывать и показывать на основе требуемого разрешения:

/* 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;
}
    
ответ дан Guruprasad Rao 12.06.2015 в 05:51
2

Сделайте поле ввода и текст заполнителя одним и тем же цветом. Нет другого способа с 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;
    }   
    }
    
ответ дан Diwas 12.06.2015 в 05:52
2

Вы должны использовать JS

$(window).resize(function(){
    if ($(window).width() >= 600){  
        $(':input').removeAttr('placeholder');
    }   
});
    
ответ дан heady12 25.04.2017 в 16:07
  • removeAttr не скрывается, когда пользователь восстанавливает изображение до исходного размера, текст внутри поля ввода не будет там –  Kim.L By 10.03.2018 в 12:30
2
<input name="name" type="text" id="id_here" placeholder="Your Label"> 

Сделать скрытие скрытия на рабочем столе

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

ИЛИ

input::-moz-placeholder {
   color:white;
}
  1. Измените ввод (или textarea whatever) на #id_here или имя класса, если вы не хотите изменять все входы на веб-сайте.
  2. Использование для разных браузеров

    -webkit-вход-заполнитель -MS-вход-заполнитель -moz-заполнитель

ответ дан J.K 12.06.2015 в 05:52