CSS සමඟ HTML5 ආදානයේ ස්ථාන දරන්නාගේ වර්ණය වෙනස් කරන්න

මූලද්‍රව්‍ය මත ස්ථාන දරන්නාගේ ගුණාංගයට Chrome සහාය දක්වයි input[type=text](අනෙක් අයද එසේ කරයි).

නමුත් පහත දැක්වෙන්නේ ස්ථාන CSSදරන්නාගේ වටිනාකමට කිසිවක් නොකරයි:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Valueඒ greyවෙනුවට තවමත් පවතිනු ඇත red.

ස්ථාන දරන්නාගේ පෙළෙහි වර්ණය වෙනස් කිරීමට ක්‍රමයක් තිබේද?

ක්‍රියාත්මක කිරීම

විවිධ ක්‍රියාත්මක කිරීම් තුනක් ඇත: ව්‍යාජ මූලද්‍රව්‍ය, ව්‍යාජ පන්ති සහ කිසිවක් නැත.

• වෙබ්කිට්, බ්ලින්ක් (සෆාරි, ගූගල් ක්‍රෝම්, ඔපෙරා 15+) සහ මයික්‍රොසොෆ්ට් එජ් ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරයි : ::-webkit-input-placeholder. ^{[ Ref ]}
• මොසිල්ලා ෆයර්ෆොක්ස් 4 සිට 18 දක්වා ව්‍යාජ පන්තියක් භාවිතා කරයි: :-moz-placeholder( එක් මහා බඩවැලක්). ^{[ Ref ]}
• මොසිල්ලා ෆයර්ෆොක්ස් 19+ ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරයි: ::-moz-placeholderනමුත් පැරණි තේරීම් කාරකය තව ටික කලක් ක්‍රියා කරනු ඇත. ^{[ Ref ]}
• ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ 11 ව්‍යාජ පන්තියක් භාවිතා කරයි : :-ms-input-placeholder. ^{[ Ref ]}
• අප්රේල් 2017: බොහෝ නවීන බ්රවුසරයන් සරල ව්යාජ මූලද්රව්යයට සහය දක්වයි ::placeholder ^{[ Ref ]}

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 සහ ඊට පහළින් ගුණාංගයට කිසිසේත් සහාය නොදක්වන placeholderඅතර ඔපෙරා 12 සහ ඊට පහළ ස්ථාන හිමිකරුවන් සඳහා කිසිදු CSS තේරීම් කාරකයකට සහාය නොදක්වයි .

හොඳම ක්‍රියාත්මක කිරීම පිළිබඳ සාකච්ඡාව තවමත් සිදුවෙමින් පවතී. ව්‍යාජ මූලද්‍රව්‍ය සෙවනැලි DOM හි සැබෑ මූලද්‍රව්‍ය මෙන් ක්‍රියා කරන බව සලකන්න . A paddingමත inputව්‍යාජ මූලද්‍රව්‍යයට සමාන පසුබිම් වර්ණයක් නොලැබේ.

CSS තේරීම්

නොදන්නා තේරීම් කාරකයක් සමඟ රීතියක් නොසලකා හැරීමට පරිශීලක නියෝජිතයින් අවශ්‍ය වේ. තේරීම් මට්ටම 3 බලන්න :

එය කණ්ඩායමක් ලෙස වලංගු තේරීම් අඩංගු තේරීම් වලංගු නැත.

එබැවින් සෑම බ්‍රව්සරයක් සඳහාම අපට වෙනම නීති අවශ්‍ය වේ. එසේ නොවුවහොත් මුළු කණ්ඩායමම සියලු බ්‍රව්සර් විසින් නොසලකා හරිනු ඇත.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

භාවිත සටහන්

• නරක ප්‍රතිවිරෝධතා වළක්වා ගැනීමට ප්‍රවේශම් වන්න. ෆයර්ෆොක්ස් හි ස්ථාන දරන්නා අඩු පාරාන්ධතාවයකින් පෙරනිමි බවක් පෙනේ, එබැවින් opacity: 1මෙහි භාවිතා කිරීම අවශ්‍ය වේ .
• ස්ථාන දරන්නාගේ පෙළ නොගැලපේ නම් එය කපා දමා ඇති බව සලකන්න - ඔබේ ආදාන අංග emවිශාල කර ඒවා අවම අවම අකුරු ප්‍රමාණ සැකසුම් සමඟ පරීක්ෂා කරන්න. පරිවර්තන අමතක නොකරන්න: සමහර භාෂාවන්ට එකම වචනයට වැඩි ඉඩක් අවශ්‍ය වේ.
• placeholder(ඔපෙරා වැනි) CSS සහය නොමැතිව HTML සහය ඇති බ්‍රව්සර් ද පරීක්ෂා කළ යුතුය.
• සමහර බ්‍රව්සර් සමහර inputවර්ග සඳහා අතිරේක පෙරනිමි CSS භාවිතා කරයි ( email, search). මේවා අනපේක්ෂිත ආකාරයකින් විදැහුම්කරණයට බලපායි. භාවිතා ගුණ -webkit-appearance හා -moz-appearanceඑය වෙනස් කිරීමට. උදාහරණයක්:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

මෙය සියල්ලන්ටම inputසහ ස්ථාන textareaදරන්නන්ට ශෛලියක් වනු ඇත .

වැදගත් සටහන: මෙම නීති කාණ්ඩ නොකරන්න. ඒ වෙනුවට, සෑම තේරීම්කරුවෙකු සඳහාම වෙනම රීතියක් සාදන්න (කණ්ඩායමක එක් අවලංගු තේරීම්කරුවෙකු මුළු කණ්ඩායමම අවලංගු කරයි).

ඔබට පෙළ මෝස්තර සැකසීමටද අවශ්‍ය විය හැකිය:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

සඳහා බුට්ස්ට්රැප් හා අඩු පරිශීලකයින් සඳහා, mixin .placeholder ඇත:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

ටොස්කෝගේ පිළිතුරට අමතරව, ක්‍රෝම් 9-10 සහ සෆාරි 5 අතර ඇති වෙබ්කිට් නොගැලපීම් සීඑස්එස් ගුණාංග සමඟ සහය දැක්වීම සැලකිය යුතු කරුණකි.

විශේෂයෙන් ක්රෝම් 9 සහ 10 සහයෝගය නැහැ background-color, border, text-decorationහා text-transformඑම තැන් දරණුව විශාලනය විට.

සම්පූර්ණ හරස් බ්‍රව්සර සංසන්දනය මෙහි ඇත.

සඳහා Sass පරිශීලකයන්:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

මෙය හොඳින් ක්‍රියාත්මක වේ. ඩෙමෝ මෙතැන:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}

<input type="text" placeholder="Value" />

ෆයර්ෆොක්ස් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි සාමාන්‍ය ආදාන පෙළ වර්ණය ස්ථාන දරන්නන්ගේ වර්ණ ගුණාංග අභිබවා යයි. ඉතින්, අපට අවශ්‍යයි

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

හරස් බ්‍රව්සර් විසඳුම:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

ණය: ඩේවිඩ් වොල්ෂ්

::placeholderඔබ autoprefixer භාවිතා කරන්නේ නම් නව භාවිතා කරන්න .

සිට .placeholder mixin බව සටහන බුට්ස්ට්රැප් මෙම පක්ෂව ප්රතික්ෂේප කරයි.

උදාහරණයක්:

input::placeholder { color: black; }

Autoprefixer භාවිතා කරන විට ඉහත සඳහන් සියලුම බ්‍රව්සර් සඳහා නිවැරදි කේතයට පරිවර්තනය වේ.

ආදාන ස්ථානගත කරන්නෙකුට CSS යෙදීම සඳහා දැන් අපට සම්මත ක්‍රමයක් ඇත: මෙම CSS මොඩියුලයේ 4 වන මට්ටමේ කෙටුම්පතේ ::placeholderව්‍යාජ මූලද්‍රව්‍යය .

මොසිල්ලා ෆයර්ෆොක්ස් 19+ සඳහා යමක් මට වැටහී ඇති අතර, බ්‍රව්සරය ස්ථාන දරන්නාට පාරාන්ධතා අගයක් ලබා දෙයි, එබැවින් වර්ණය ඔබට සැබවින්ම අවශ්‍ය දේ නොවනු ඇත.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

මම opacity1 සඳහා නැවත ලියමි , එබැවින් යන්න හොඳ වනු ඇත.

මෙම කේත ස්නිපටය අන්තර්ජාලයේ මා සොයාගත්තේ කොහෙන්දැයි මට මතක නැත (එය මා විසින් ලියන ලද්දක් නොවේ, මා එය සොයාගත්තේ කොහෙන්දැයි මතක නැත, හෝ එය ලිව්වේ කවුද).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

මෙම ජාවාස්ක්‍රිප්ට් කේතය පටවා මෙම රීතිය ඇමතීමෙන් ඔබේ ස්ථාන දරන්නා CSS සමඟ සංස්කරණය කරන්න:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

ආදාන වර්ගයේ පෙළ සඳහා පමණක් ස්ථානගත කිරීමක් අවශ්‍ය බැවින් මෙම කේතය ක්‍රියාත්මක වනු ඇතැයි මම සිතමි. එබැවින් මෙම එක් පේළියේ CSS ඔබේ අවශ්‍යතාවයට ප්‍රමාණවත් වනු ඇත:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

සඳහා බුට්ස්ට්රැප් පරිශීලකයන්, ඔබ භාවිතා කරන්නේ නම් class="form-control", එහි CSS නිශ්චිතභාවයකින් ගැටළුවක් විය හැක. ඔබට ඉහළ ප්‍රමුඛතාවයක් ලබා ගත යුතුය:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

නැතහොත් ඔබ අඩුවෙන් භාවිතා කරන්නේ නම් :

.form-control{
    .placeholder(red);
}

ඔබ බූට්ස්ට්‍රැප් භාවිතා කරන්නේ නම් සහ මෙම ක්‍රියාකාරීත්වය ලබා ගත නොහැකි නම්, බොහෝ විට ඔබට බූට්ස්ට්‍රැප් විසින්ම මෙම තේරීම් කාරක එකතු කරන බව මඟ හැරී ඇත. මෙය අපි කතා කරන්නේ Bootstrap v3.3 ය.

.Form-control CSS පන්තියක් තුළ ස්ථාන දරන්නා වෙනස් කිරීමට ඔබ උත්සාහ කරන්නේ නම් ඔබ එය මේ ආකාරයට අභිබවා යා යුතුය:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

මෙම කෙටි හා පිරිසිදු කේතය:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

කොහොමද මේ

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

CSS හෝ ස්ථාන දරන්නා නැත, නමුත් ඔබට එකම ක්‍රියාකාරීත්වයක් ලැබේ.

මගේ ජංගම වේදිකාවේ වර්ණය වෙනස් කිරීමට මම මෙහි සෑම සංයෝජනයක්ම උත්සාහ කර ඇත්තෙමි.

-webkit-text-fill-color: red;

එය උපක්‍රමය කළා.

බෝර්බන් භාවිතා කරන SASS / SCSS භාවිතා කරන්නන් සඳහා , එය තුළ සාදන ලද ශ්‍රිතයක් ඇත.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS ප්‍රතිදානය, ඔබට මෙම කොටස අල්ලා ඔබේ කේතයට ඇලවිය හැකිය.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

විවිධ ආදාන මූලද්‍රව්‍ය විවිධ ශෛලිය සඳහා මෙම කේතය උත්සාහ කරන්න

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

උදාහරණ 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

උදාහරණ 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

මෙන්න තවත් එක් උදාහරණයක්:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

නියම ඉතා හොඳ හා සරල හැකියාවක් එකතු කිරීම: css පෙරහන් !

එය ස්ථාන දරන්නා ඇතුළු සෑම දෙයක්ම මෝස්තර කරයි.

පහත දැක්වෙන්නේ වර්ණ වෙනස් කිරීම සඳහා වර්ණ පෙරණය භාවිතා කරමින් එකම ආදාන මත ආදාන දෙකම සකසනු ඇත. එය දැන් බ්‍රව්සර්වල ඉතා හොඳින් විදහා දක්වයි (එනම් ... හැර)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

පරිශීලකයින්ට එය ගතිකව වෙනස් කිරීමට ඉඩ දීම සඳහා, වෙනස්කම් සඳහා ආදාන වර්ගයේ වර්ණයක් භාවිතා කිරීම හෝ සූක්ෂ්ම සොයා ගැනීම සඳහා, මෙම ස්නිපටය බලන්න:

සිට: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css පෙරහන් ලියකියවිලි: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

හරි, ස්ථාන දරන්නන් විවිධ බ්‍රව්සර්වල වෙනස් ලෙස හැසිරේ, එබැවින් ඒවා සමාන කිරීමට ඔබේ CSS හි බ්‍රව්සර් උපසර්ගය භාවිතා කළ යුතුය, නිදසුනක් ලෙස ෆයර්ෆොක්ස් පෙරනිමියෙන් ස්ථාන දරන්නාට විනිවිදභාවයක් ලබා දෙයි, එබැවින් ඔබේ සීඑස්එස් වෙත පාරාන්ධතාව 1 එකතු කළ යුතුය, වර්ණය, එය නොවේ බොහෝ විට විශාල සැලකිල්ලක්, නමුත් ඒවා අනුකූල වීම හොඳ ය:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

ඔබට CSS සමඟ HTML5 ආදාන ස්ථානගත කිරීමේ වර්ණය වෙනස් කළ හැකිය. අහම්බෙන්, ඔබේ CSS ගැටුම, මෙම කේත සටහන ක්‍රියාත්මක වන්නේ නම්, ඔබට පහත පරිදි (! වැදගත්) භාවිතා කළ හැකිය.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

මෙය උපකාරී වේ යැයි සිතමි.

ආදාන සහ නාභිගත විලාසය සඳහා ඔබට මෙය භාවිතා කළ හැකිය:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

පහසුම ක්‍රමය වනුයේ:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

මාලිමා ය සතුව මේ සඳහා මික්සින් එකක් ඇත.

ඔබේ උදාහරණය ගන්න:

<input type="text" placeholder="Value">

සහ මාලිමා යන්ත්‍ර භාවිතා කරමින් SCSS හි:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

ආදාන-ස්ථාන දරණ මික්සින් සඳහා ලියකියවිලි බලන්න.

CSS තේරීම්කරුවන් සමඟ විසඳුම මෙන්න

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• වෙබ්කිට්, බ්ලින්ක් (සෆාරි, ගූගල් ක්‍රෝම්, ඔපෙරා 15+) සහ මයික්‍රොසොෆ්ට් එජ් ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරයි:
  :: - වෙබ්කිට්-ආදාන-ස්ථාන දරන්නා.
• මොසිල්ලා ෆයර්ෆොක්ස් 4 සිට 18 දක්වා ව්‍යාජ පංතියක් භාවිතා කරයි
  : -moz-placeholder (එක් කොලන්).
  මොසිල්ලා ෆයර්ෆොක්ස් 19+ ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරයි:
  :: - moz-placeholder, නමුත් පැරණි තේරීම් කාරකය තව ටික කලක් ක්‍රියා කරනු ඇත.
• ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ 11 ව්‍යාජ පංතියක් භාවිතා කරයි
  : -ms-input-placeholder.
• ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 සහ ඊට පහළින් ස්ථාන දරන්නාගේ ගුණාංගයට කිසිසේත් සහාය නොදක්වන අතර ඔපෙරා 12 සහ ඊට පහළ ස්ථාන ස්ථානගත කරන්නන් සඳහා කිසිදු CSS තේරීම් කාරකයකට සහාය නොදක්වයි.

HTML හි කොටසක්:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

CSS විසින් 'වාක්‍යය ඇතුළත් කරන්න' යන ප්‍රකාශයේ වර්ණය වෙනස් කරන්නේ කෙසේදැයි මම පෙන්වන්නම්:

  ::placeholder{
  color:blue;
   }