เปลี่ยนสีตัวยึดตำแหน่งของอินพุต HTML5 ด้วย CSS

Chrome รองรับแอตทริบิวต์ตัวยึดตำแหน่งในinput[type=text]องค์ประกอบ (ส่วนอื่นอาจทำเช่นกัน)

แต่สิ่งต่อไปนี้CSSไม่ได้ทำอะไรกับมูลค่าของตัวแทน:

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

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

Valueจะยังคงอยู่แทนgreyred

มีวิธีในการเปลี่ยนสีของข้อความตัวยึดตำแหน่งหรือไม่

การดำเนินงาน

มีการใช้งานที่แตกต่างกันสามแบบ: องค์ประกอบแบบหลอก, ชั้นเรียนแบบหลอกและไม่มีอะไร

• WebKit, Blink (Safari, Google Chrome, Opera 15+) และ Microsoft ::-webkit-input-placeholderขอบใช้หลอกองค์ประกอบ: ^{[ อ้างอิง ]}
• Mozilla Firefox 4 ถึง 18 กำลังใช้คลาส pseudo: :-moz-placeholder( หนึ่งโคลอน) ^{[ อ้างอิง ]}
• Mozilla Firefox 19+ ใช้องค์ประกอบปลอม: ::-moz-placeholderแต่ตัวเลือกเก่าจะยังคงใช้งานได้ระยะหนึ่ง ^{[ อ้างอิง ]}
• Internet Explorer 10 และ 11 :-ms-input-placeholderกำลังใช้หลอกชั้น: ^{[ อ้างอิง ]}
• เมษายน 2017: เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับองค์ประกอบหลอกง่าย::placeholder ^{[ อ้างอิง ]}

Internet Explorer 9 และรุ่นที่ต่ำกว่าไม่รองรับplaceholderคุณสมบัติเลยขณะที่Opera 12 และรุ่นต่ำกว่าไม่รองรับตัวเลือก CSS ใด ๆ สำหรับตัวยึดตำแหน่ง

การอภิปรายเกี่ยวกับการใช้งานที่ดีที่สุดยังคงเกิดขึ้น หมายเหตุ: การกระทำหลอกองค์ประกอบเช่นองค์ประกอบที่แท้จริงในเงา DOM paddingบนinputจะไม่ได้รับสีพื้นหลังเช่นเดียวกับองค์ประกอบหลอก

CSS selectors

ตัวแทนผู้ใช้จะต้องเพิกเฉยกฎกับตัวเลือกที่ไม่รู้จัก ดูตัวเลือกระดับ 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!">

บันทึกการใช้งาน

• ระมัดระวังเพื่อหลีกเลี่ยงความแตกต่างที่ไม่ดี ตัวยึดตำแหน่งของ Firefox ดูเหมือนจะเริ่มต้นด้วยความทึบลดลงดังนั้นจึงจำเป็นต้องใช้opacity: 1ที่นี่
• โปรดทราบว่าข้อความตัวยึดจะถูกตัดออกหากไม่พอดี - ปรับขนาดองค์ประกอบอินพุตของคุณemและทดสอบด้วยการตั้งค่าขนาดตัวอักษรขั้นต่ำสุดใหญ่ อย่าลืมคำแปล: บางภาษาต้องการพื้นที่มากขึ้นสำหรับคำเดียวกัน
• เบราว์เซอร์ที่รองรับ HTML placeholderแต่ไม่สนับสนุน CSS สำหรับ (เช่น Opera) ควรทำการทดสอบเช่นกัน
• เบราว์เซอร์บางตัวใช้ CSS เริ่มต้นเพิ่มเติมสำหรับบางinputประเภท ( 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;
}

สำหรับBootstrapและLess users มี mixin .placeholder:

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

นอกจากคำตอบของ toscho ฉันได้สังเกตเห็นความไม่สอดคล้องกันของ webkit ระหว่าง Chrome 9-10 และ Safari 5 ด้วยคุณสมบัติ CSS ที่สนับสนุนซึ่งคุ้มค่ากับการสังเกต

โดยเฉพาะ Chrome 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" />

ใน Firefox และ Internet Explorer สีข้อความอินพุตปกติจะแทนที่คุณสมบัติสีของตัวยึดตำแหน่ง ดังนั้นเราต้อง

::-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; }

เครดิต: David Walsh

ใช้ตัวเลือกใหม่::placeholderหากคุณใช้ตัวแก้ไขอัตโนมัติ

โปรดทราบว่า. placeholder mixin จากBootstrapไม่ได้รับการสนับสนุนในเรื่องนี้

ตัวอย่าง:

input::placeholder { color: black; }

เมื่อใช้ตัวแก้ไขอัตโนมัติข้างต้นจะถูกแปลงเป็นรหัสที่ถูกต้องสำหรับเบราว์เซอร์ทั้งหมด

ตอนนี้เรามีวิธีการมาตรฐานที่จะใช้ CSS เพื่อการป้อนข้อมูลของตัวจองพื้นที่: ::placeholderหลอกองค์ประกอบจากนี้ CSS โมดูลระดับที่ 4 ร่าง

ฉันเพิ่งรู้อะไรบางอย่างสำหรับ Mozilla Firefox 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('');
            }
        })
    });

เพียงโหลดรหัส JavaScript นี้จากนั้นแก้ไขตัวยึดตำแหน่งของคุณด้วย CSS โดยเรียกกฎนี้:

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

ฉันคิดว่ารหัสนี้จะใช้งานได้เนื่องจากตัวยึดตำแหน่งจำเป็นสำหรับข้อความประเภทอินพุตเท่านั้น ดังนั้นหนึ่งบรรทัด CSS นี้จะเพียงพอสำหรับความต้องการของคุณ:

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

สำหรับผู้ใช้Bootstrapถ้าคุณใช้class="form-control"อาจมีปัญหาเฉพาะ CSS คุณควรได้รับความสำคัญสูงกว่า:

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

หรือถ้าคุณใช้Less :

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

หากคุณใช้Bootstrapและไม่สามารถใช้งานได้คุณอาจพลาดความจริงที่ว่า Bootstrap เพิ่มตัวเลือกเหล่านี้ นี่คือ Bootstrap v3.3 ที่เรากำลังพูดถึง

หากคุณพยายามที่จะเปลี่ยนตัวยึดตำแหน่งในคลาส CSS. formform controlคุณควรแทนที่มันเช่นนี้

.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 ที่ใช้Bourbonจะมีฟังก์ชั่นในตัว

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Output คุณสามารถคว้าส่วนนี้และวางลงในโค้ดของคุณ

//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 ฟิลเตอร์ !

มันจะจัดรูปแบบทุกอย่างรวมถึงตัวยึดตำแหน่ง

ต่อไปนี้จะตั้งค่าอินพุตทั้งสองบนพาเล็ตเดียวกันโดยใช้ฟิลเตอร์ hue เพื่อเปลี่ยนสี มันแสดงผลได้ดีมากในเบราว์เซอร์ (ยกเว้นเช่น ... )

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 ของคุณเพื่อให้เหมือนกันตัวอย่างเช่น Firefox ให้ความโปร่งใสแก่ตัวยึดตำแหน่งโดยค่าเริ่มต้นดังนั้นจำเป็นต้องเพิ่มความทึบ 1 ลงใน css ของคุณ เป็นเรื่องที่น่ากังวลเป็นส่วนใหญ่ แต่ก็ดีที่จะให้มันสอดคล้องกัน:

*::-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;
}

คุณสามารถเปลี่ยนสีตัวยึดตำแหน่งของอินพุต HTML5 ด้วย CSS หากบังเอิญความขัดแย้ง 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;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+)และMicrosoft Edgeกำลังใช้องค์ประกอบปลอม:
  :: - webkit-input-placeholder
• Mozilla Firefox 4 ถึง 18กำลังใช้คลาส pseudo
  :: -moz-placeholder (หนึ่งโคลอน)
  Mozilla Firefox 19+ใช้ pseudo-element:
  :: - moz-placeholder แต่ตัวเลือกเก่าจะยังคงใช้งานได้ระยะหนึ่ง
• Internet Explorer 10 และ 11กำลังใช้คลาส pseudo
  :: -ms-input-placeholder
• Internet Explorer 9และรุ่นที่ต่ำกว่าไม่รองรับคุณสมบัติตัวยึดตำแหน่งทั้งหมดในขณะที่ Opera 12 และรุ่นต่ำกว่าไม่รองรับตัวเลือก CSS ใด ๆ สำหรับตัวยึดตำแหน่ง

ส่วนหนึ่งของ HTML:

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

ฉันจะแสดงวิธีเปลี่ยนสีการแสดงออกของ 'ใส่ประโยค' โดย CSS:

  ::placeholder{
  color:blue;
   }