Как перемещать текст в поле ввода?

Так что я в процессе обучения и пытается создать свой собственный сайт. У меня есть большая часть формы, как бы мне хотелось, но я не уверен, как очистить текст-заполнитель от svg img, чтобы он был разборчивым. Некоторая помощь будет принята с благодарностью.Как перемещать текст в поле ввода?

Заранее спасибо.

Screen Capture of my problem. Also if you would tell me if it looks okay that would be great also!

.inputTagz{ 
    padding-left: 25px; 
    cursor: text; 
    font-size: 14px; 
    float: left; 
    width: 100%; 
    font-size: px; 
    padding-top: 11px; 
    padding-bottom: 11px; 
    margin-top:20px; 
    font-weight:700; 
} 

#name{ 
    background-image: url("man.svg"); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#emailPhone{ 
    background-image: url("mail.svg"); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#password{ 
    background-image: url("lock.svg"); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 
#formDiv{ 
    width: 450px; 
    float: left; 
    left: 50%; 
}

источник

2015-11-02 ChrisSlightGhost

вы хотите, чтобы текст читабельным, верно? после вашего изображения текст? –

Какова ширина поля ввода? – Mitul

Да, сэр, когда я пытаюсь использовать прописку, которая приводит к растягиванию окна ввода вместо того, чтобы влиять на текст заполнителя. – ChrisSlightGhost

вам необходимо изменить владельца места, вы можете использовать это

#emastrong textilPhone { 
    background-image: url("mail.svg"); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#password { 
    background-image: url("lock.svg"); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#emailPhone::-webkit-input-placeholder { 
    padding-left: 25px; 
} 

#emailPhone::-moz-placeholder { 
    padding-left: 25px; 
} 
#emailPhone:-moz-placeholder { /* Older versions of Firefox */ 
    padding-left: 25px; 
} 
#emailPhone:-ms-input-placeholder { 
    padding-left: 25px; 
} 

#password::-webkit-input-placeholder { 
    padding-left: 25px; 
} 

#password::-moz-placeholder { 
    padding-left: 25px; 
} 
#password:-moz-placeholder { /* Older versions of Firefox */ 
    padding-left: 25px; 
} 
#password:-ms-input-placeholder { 
    padding-left: 25px; 
}

, пожалуйста, проверьте последнее обновление о том, как изменить местозаполнитель. Спасибо, надеюсь, это поможет вам.

попробовать этот код ...

источник

2015-11-02 05:48:31

Ха-ха, как только вы сделали свой ответ, я понял, что это теги CSS3. Спасибо, Джон. – ChrisSlightGhost

ваш прием. :) –

попробовать этот

CSS

input[type=text] { 
     padding-left: 25px; //change it base on your desired output 
}

см мой пример fiddle

источник

2015-11-02 05:21:23

Пожалуйста, добавьте этот CSS

input[type='text'] { 
     padding-left: 25px; 
     max-width : calc(100% - 25px); 
}

источник

2015-11-02 05:27:04 Mitul

Из чего я могу понять, вам просто нужно удалить атрибут «placeholder» из кода для всех трех входов в созданной вами форме.

Для справки нажмите here

источник

2015-11-02 05:27:06

Вы можете обернуть его внутри родительского DIV с отдельным IMG и ввода тега следующим образом:

<div id="some_id"> 
    <img src="http://images.brighthub.com/a3/d/a3d2a3f5888d96ddde78d526bf9448dddf2fb4aa_small.jpg"> 
    <input type="text" placeholder="Enter Your Name" id="some_text_id"> 
</div>

Пример FIDDLE

источник

2015-11-02 05:34:12 Abhi

Эй, ребята, спасибо за ответ на мой вопрос, который я очень ценю это. Стиль, который я искал, был тег CSS3 ввода-заполнителя.

Я просто добавил эти наборы тегов на свою страницу. Надеюсь, я смогу помочь кому-то вроде меня.

input::-webkit-input-placeholder { 
    padding-left:20px; 
} 
input::-moz-placeholder { 
    padding-left:20px; 
} 
input:-moz-placeholder { /* Older versions of Firefox */ 
    padding-left:20px; 
} 
input:-ms-input-placeholder { 
    padding-left:20px; 
}

источник

2015-11-02 05:56:33 ChrisSlightGhost

Как перемещать текст в поле ввода?

ответ

Смежные вопросы