Разноцветный Placeholder

@kepamuk · Регистрация: 03.09.2013

Author24 — интернет-сервис помощи студентам

Добрый день! Подскажите как сделать вот такой placeholder

Я сделал с помощью js вот так:

Javascript

        document.documentElement.id = "js";
        $(document).ready(function(){
            if($('.input-name').val() != ""){
                $(".msg-name").addClass('hide-name');
                $('.input-name').addClass('show-name');
            }
            $('.input-name').on("keydown",function() {
                $(".msg-name").addClass('hide-name');
                $('.input-name').addClass('show-name');
            });
            $('.input-name').on("keyup",function() {
                if ($(this).val() == '') {
                    $(".msg-name").removeClass('hide-name');
                    $('.input-name').removeClass('show-name');
                }
            });
            $('.input-name').on("blur",function() {
                if ($(this).val() == '') {
                    $(".msg-name").removeClass('hide-name');
                    $('.input-name').removeClass('show-name');
                }
            });
        });

CSS

#form-name{width: 415px;display: inline-block;}
        .span-name{color:red;}
        .input-name{border:none;display: block;background:none;position:relative;height: 56px;width: 415px;}
        #js .msg-name{background-color:#273a71;position:absolute;cursor:text;color:white;padding: 18px;border-radius: 3px;padding-right: 294px;padding-left:25px;letter-spacing: -0.04em;}
        .input-name, .msg-name{font-family: "titillium_webregular";line-height: 1em;font-size: 20px;}
        .hide-name{display:none;}
        .show-name{background-color:#273a71;border-radius: 3px;}

HTML5

                <div id="footer-in-form">
                    <div id="form-name">
                        <div class="msg-name">Your Name <span class="span-name">*</span></div>
                        <input type="text" class="input-name">
                    </div>
                </div>

Но такой вариант мне кажется не очень хорошим, может есть способ изменить цвет именно у атрибута placeholder ? Если нет то подскажите как можно сделать более проще, спасибо !

@kepamuk · 16.02.2015, 16:12 **[ТС]**

Но самое главное мне нужно сделать и textarea с таким же placeholder, а т к textarea можно увеличивать.уменьшать, то мой вариант не подходит для неё потому что фон у меня не двигается. Подскажите кто может, спасибо !

@kepamuk 14 / 14 / 5 Регистрация: 03.09.2013 Сообщений: 159
	16.02.2015, 16:12 [ТС]	2
	Но самое главное мне нужно сделать и textarea с таким же placeholder, а т к textarea можно увеличивать.уменьшать, то мой вариант не подходит для неё потому что фон у меня не двигается. Подскажите кто может, спасибо ! 0