Скрыть место с css

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

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

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

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

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

Ответы

Ответ 1

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

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

Проверьте это на Codepen.

Ответ 2

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

Проверьте скрипку

Ответ 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;
}

Ответ 4

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

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

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

ИЛИ

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

Измените ввод (или textarea whatever) на #id_here или имя класса, если вы не хотите изменять все входы на веб-сайте.
Использование для разных браузеров

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

Ответ 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;
    }   
    }

Ответ 6

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

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