Как отобразить несколько цветов шрифта внутри текстового поля

я хочу текст внутри текстового поля, например "ваше имя*"
цвет "ваше имя" должен быть черным, а цвет * должен быть красным.
как я могу это сделать??

Помогите пожалуйста мне.


textfield css required-field textbox
person khurram    schedule 12.04.2012    source источник
comment
Насколько я знаю, вы не можете частично изменить цвет текста в текстовом поле или текстовой области. Вам нужно будет изучить использование атрибута contenteditable и скопировать содержимое из него в текстовое поле для сохранения значения (например, что делает большинство редакторов WYSIWYG)   -  person Ege Özcan    schedule 12.04.2012
comment
Спасибо, дорогой. это помогает мне очистить свой разум   -  person khurram    schedule 12.04.2012

Ответы (4)


arrow_upward
1
arrow_downward

Вы не можете; значением поля ввода текста является обычный текст.

Поместите пояснение, включая индикатор обязательности, если хотите, в метку, а не в поле. Вы можете использовать разметку для индикатора и раскрасить его:

<label for=name>Your name<span class=reqd>*</span>:</label>
<input id=name name=name size=40 required>
person Jukka K. Korpela    schedule 12.04.2012
comment
спасибо за быстрый ответ. мой дизайнер дал мне дизайн страницы, которая содержит текстовые поля такого типа, как я упоминал выше в своем вопросе. Это было для меня новым. :) - person khurram; 12.04.2012

arrow_upward
0
arrow_downward

Я думаю, ты должен этого хотеть

CSS

label{
    color:black;
}
label  span {
    color:red;
}
input{
    line-height:25px;
    color:gray;
    font-size:16px;
}

input:focus{
color:black;
}

HTML

<label>
    Your Name:- <input type="text" value="your name"><span>*</span>
</label>

Живая демонстрация http://jsfiddle.net/rohitazad/dZmaZ/

person Rohit Azad Malik    schedule 12.04.2012
comment
ma ne kuch din Howe присоединяйтесь к сети kiya he ye. сайт бхот ачи он йе. - person khurram; 12.04.2012

arrow_upward
0
arrow_downward

У вас не может быть разных цветов в одном текстовом поле. (В любом случае надежно в браузерах)

Самый распространенный подход к этой проблеме для обязательных полей — разместить звездочку сразу после текстового поля в элементе с классом, чтобы сделать текст красным.

Пример: http://jsfiddle.net/JzFd4/

person benni_mac_b    schedule 12.04.2012
comment
я хочу, чтобы кружок наводился на мое изображение. это изображение с разрешением 230 x 231. при наведении на изображение будет показана только часть круга. как это будет? - person khurram; 12.04.2012
comment
Создайте новый вопрос со своей проблемой, и все сообщество сможет предложить помощь :) - person benni_mac_b; 12.04.2012
comment
Я создал новый, но система сказала мне, что он не соответствует нашим стандартам качества. :( - person khurram; 12.04.2012
comment
Не позволяйте этому оттолкнуть вас, попробуйте еще раз, включив как можно больше информации и кода. Попробуйте то, чего вы пытаетесь достичь, и спросите о битах, на которых вы застряли. Удачи - person benni_mac_b; 12.04.2012

arrow_upward
-1
arrow_downward

Это то, о чем я спрашивал здесь.
Заполнитель нескольких цветов.
Ссылка для ответа здесь

Небольшой трюк здесь 

.input-field {
    position: relative;
    display: inline-block;
}
.input-field > label {
    position: absolute;
    left: 0.5em;
    top: 50%;
    margin-top: -0.5em;
    opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
    display: none;
}
.input-field > label > span {
    letter-spacing: -2px;
}
.first-letter {
    color: red;
}
.second-letter {
    color: blue;
<div class="input-field">
    <input id="input-text-field" type="text"></input>
    <label for="input-text-field"> 
        <span class="first-letter">your name</span>  
        <span class="second-letter">*</span>
    </label>
</div>

person khurram    schedule 25.11.2015