Как изменить размеры удаления креста и placeholder?

Question

[Edward]

HTML

spoiler

<form action="https://echo.htmlacademy.ru" method="post">
<input class="message" type="text" name="message" placeholder="Your message..."></form>

CSS

spoiler

.message {
    border: 3px none;
    border-radius: 5px 5px 5px 5px;
    background: white;
    width: 100%;
    height: 170px;
    font-size: 16px;
    padding: 5px;
    margin-top: 21px;
}

Как поднять placeholder вверх, и изменить размеры креста( или убрать его вообще)

spoiler

Comments

[sergey]

Изучите лучше jsfiddle или codepen, вместо своих спойлеров

[account-4]

SM: JSBin тоже неплохой.

Answer 1

[Дмитрий]

Да есть решение. Даже анимацию можно запилить для него без всякой лабуды в виде дополнительных плагинов.

::-webkit-input-placeholder {color:#feb500;}
::-moz-placeholder          {color:#feb500;}/* Firefox 19+ */
:-moz-placeholder           {color:#feb500;}/* Firefox 18- */
:-ms-input-placeholder      {color:#feb500;}
input::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
input::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

Comments

[Дмитрий]

Соответственно потыкаешь, разберешься

Answer 2

[Юрий Крот]

Крестик по ходу добавляется или через яваскрипт, или псевдокласом :after