web-dev-qa-db-ja.com

フォームのプレースホルダー内にスパンを追加

フォームのプレースホルダーに色のアステリックスを追加したいのですが、可能ですか？ enter image description here

formshtmlplaceholder
8
user3067592

これが純粋なCSSソリューションIE10 +です

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}
<form novalidate>
    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Email <span>*</span>
        </div>
    </div>
    <input type="submit">
</form>
9
Sergey Nakhankov

一見、それは不可能に思えますが、独自の偽のスパンホルダー要素を作成するための良い代替手段かもしれません。

<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />

フィドル

8
Praxis Ashelin

私の知る限り、これは不可能です。

過去に使用した解決策の1つは、入力フィールドに赤いアスタリスクの背景画像を追加することですが、これにより、目的の視覚的な配置を複製することが困難になります。このメソッドの詳細： CSSを使用して、入力を形成するために「必須フィールド」のアスタリスクを自動的に追加します

別の解決策は、入力フィールドの外側にスパン（およびプレースホルダーテキスト）を追加することですが、これには、表示されるタイミングと表示されないタイミングを制御するためのJavaScriptが必要になります。

これが私がこのメソッド用に作成したJSFiddleです（jQueryを使用）： http://jsfiddle.net/nLZr9/

HTML

<form>
    <div class="field">
        <label class="placeholder" for="email">
            Email Address
            <span class="red">*</span>
        </label>
        <input id="email" type="text" />
    </div>
</form>

CSS

.field {
    position: relative;
    height: 30px;
    width: 200px;
}
input, label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 5px;
    line-height: 30px;
}

JS

$('.field input')
    .on( 'focus', function () {         
        $(this).siblings('label').hide();
    } )
    .on( 'blur',  function () {
        if ( !$(this).val() )
            $(this).siblings('label').show();
    } );
2
Robert Messerle

私はあなたに合うかもしれないjQueryプラグイン、 pholder プラグインを見つけました。
デモを見ると、「名前」フィールドのプラクホルダーは赤です。

他のプラグインがあるかもしれませんし、編集できるかもしれません。 :)

0
doydoy44