Placeholder і Drupal 7. Стилізуємо placeholder за допомогою CSS.

Как изменить placeholder
Оцінка матеріалу: 
Average: 5 (1 vote)

Атрибут placeholder являється прекрасним замінником звичного label у проектах. Дана підказака використовується всередині елементів input та textarea. В друпалі placeholder можна застосувати у модулі Webform. При створенні нового поля у вебформі прописуємо потрібну підказку і забираємо label поля:

как вывести placeholder в друпале Placeholder і Drupal 7. Стилізуємо placeholder за допомогою CSS. Как изменить placeholder

Однак за замовчуванням виглдя placeholder не презентабельним і потребує доопрацювання. Нище розглянемо CSS трюки по оформленні підказок. В placeholder стилізувати можна такі CSS властивості:

font 

background 

color

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

text-indent

text-overflow

opacity

В файлі css прописуємо такий код:

::-webkit-input-placeholder {color:red;}

::-moz-placeholder {color:red;}

:-moz-placeholder {color:red;}

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

Колір підказао буде червоно кольору. Тепер зробимо, щоб при введені текту placeholder плавно зникав:

:focus::-webkit-input-placeholder {
    color: transparent;
    
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

:focus::-moz-placeholder  {
    color: transparent;
    
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

 :focus:-moz-placeholder {
    color: transparent;
    
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

:focus:-ms-input-placeholder {
    color: transparent;
    
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

В адаптивних дизайнах розмір input-a може змінюватись і текст підказки моде негарно обрізаний, щоб цього уникнути додаємо:

input[placeholder] {text-overflow:ellipsis;}

input::-moz-placeholder {text-overflow:ellipsis;}

input:-moz-placeholder {text-overflow:ellipsis;}

input:-ms-input-placeholder {text-overflow:ellipsis;}