#input로 태그된 메모

표준은 ::placeholder 하나다(2020년부터 전 브라우저).¹ 아래는 그 전의 접두사와 IE·레거시 Edge 전용 컨트롤.

::-webkit-input-placeholder /* for (Chrome/Safari/Opera) */
:-ms-input-placeholder /* for IE. */
::-ms-input-placeholder /* for Edge (also supports webkit prefix) */

::-ms-clear {}
::-ms-reveal {}

On Edge Browser, how to change input placeholder text color using CSS?

::placeholder - MDN: “The ::placeholder CSS pseudo-element represents the placeholder text in an or element.”</em> — Baseline: <em>“It’s been available across browsers since January 2020.”</em> <a href="#user-content-fnref-166-placeholder" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> </div><div class="flex flex-col gap-1 pt-4 text-[10px] text-(--flexoki-400) mt-4"><div class="flex gap-2 overflow-x-auto"><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/input">#input</a><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/css">#css</a></div><div class="flex items-center gap-2 py-2"><a class="underline" href="/memo/166">#166</a><time class="text-ellipsis overflow-hidden whitespace-nowrap cursor-" title="편집됨: 2026년 10월 29일 목요일">생성됨: 2022년 4월 9일 토요일</time></div></div></div><div class="overflow-hidden border-2 border-(--flexoki-950) p-[10px] rounded-lg text-sm"><div class="_root_usyu0_2"><p><code>autocomplete="one-time-code"</code> 는 이 칸이 OTP 라고 브라우저에 알리는 힌트다 — SMS 로 온 코드를 OS·키보드가 제안한다.<sup><a href="#user-content-fn-167-autocomplete" id="user-content-fnref-167-autocomplete" data-footnote-ref aria-describedby="footnote-label">1</a></sup> JS 로 직접 받으려면 WebOTP(<code>navigator.credentials.get({ otp })</code>)인데, SMS 마지막 줄이 <code>@도메인 #코드</code> 형식이어야 한다.<sup><a href="#user-content-fn-167-webotp" id="user-content-fnref-167-webotp" data-footnote-ref aria-describedby="footnote-label">2</a></sup></p> <pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#ABB2BF"><</span><span style="color:#E06C75">input</span><span style="color:#ABB2BF"> </span></span> <span class="line"><span style="color:#D19A66"> type</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"text"</span></span> <span class="line"><span style="color:#D19A66"> inputmode</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"numeric"</span></span> <span class="line"><span style="color:#D19A66"> autocomplete</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"one-time-code"</span></span> <span class="line"><span style="color:#D19A66"> pattern</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"\d{6}"</span></span> <span class="line"><span style="color:#D19A66"> required</span></span> <span class="line"><span style="color:#ABB2BF">/></span></span></code></pre> <pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> otp</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> await</span><span style="color:#E5C07B"> navigator</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">credentials</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">get</span><span style="color:#ABB2BF">({</span></span> <span class="line"><span style="color:#E06C75"> otp</span><span style="color:#ABB2BF">: {</span></span> <span class="line"><span style="color:#E06C75"> transport</span><span style="color:#ABB2BF">: [</span><span style="color:#98C379">'sms'</span><span style="color:#ABB2BF">]</span></span> <span class="line"><span style="color:#ABB2BF"> }</span></span> <span class="line"><span style="color:#ABB2BF">})</span></span> <span class="line"></span> <span class="line"><span style="color:#E5C07B">input</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">value</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> otp</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">code</span></span></code></pre> <p>참고</p> <ul> <li><a href="https://web.dev/sms-otp-form/">SMS OTP form best practices</a></li> <li><a href="https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element">Apple Developer Documentation</a></li> <li><a href="https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete">HTML attributes to improve your users’ two factor authentication experience</a></li> </ul> <hr> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-167-autocomplete"> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">HTML attribute: autocomplete - MDN</a>: <em>“A one-time password (OTP) for verifying user identity that is used as an additional factor in a sign-in flow. Most commonly this is a code received via some out-of-channel mechanism, such as SMS, email, or authenticator application.”</em> <a href="#user-content-fnref-167-autocomplete" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-167-webotp"> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API">WebOTP API - MDN</a>: <em>“The last line is mandatory. It must be the last line if there are others present, and must consist of: The domain part of the URL of the website that invoked the API, preceded by a @. Followed by a space. Followed by the OTP, preceded by a pound sign (#).”</em> <a href="#user-content-fnref-167-webotp" data-footnote-backref="" aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> </ol> </section> </div><div class="flex flex-col gap-1 pt-4 text-[10px] text-(--flexoki-400) mt-4"><div class="flex gap-2 overflow-x-auto"><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/input">#input</a><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/otp">#otp</a></div><div class="flex items-center gap-2 py-2"><a class="underline" href="/memo/167">#167</a><time class="text-ellipsis overflow-hidden whitespace-nowrap cursor-" title="편집됨: 2026년 10월 29일 목요일">생성됨: 2022년 4월 9일 토요일</time></div></div></div><div class="overflow-hidden border-2 border-(--flexoki-950) p-[10px] rounded-lg text-sm"><div class="_root_usyu0_2"><ul> <li><a href="https://www.npmjs.com/package/react-mentions">react-mentions</a><sup><a href="#user-content-fn-232-1" id="user-content-fnref-232-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></li> <li><a href="https://github.com/zurb/tribute">tribute</a><sup><a href="#user-content-fn-232-2" id="user-content-fnref-232-2" data-footnote-ref aria-describedby="footnote-label">2</a></sup></li> <li><a href="https://github.com/abinavseelan/react-input-trigger">react-input-trigger</a><sup><a href="#user-content-fn-232-3" id="user-content-fnref-232-3" data-footnote-ref aria-describedby="footnote-label">3</a></sup></li> <li><a href="https://github.com/lovasoa/react-contenteditable">react-contenteditable</a><sup><a href="#user-content-fn-232-4" id="user-content-fnref-232-4" data-footnote-ref aria-describedby="footnote-label">4</a></sup></li> <li><a href="https://github.com/facebook/draft-js">draft-js</a><sup><a href="#user-content-fn-232-5" id="user-content-fnref-232-5" data-footnote-ref aria-describedby="footnote-label">5</a></sup></li> </ul> <hr> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-232-1"> <p><code>textarea</code>에서 특정 키입력이 발생할 경우 액션(멘션)을 발생시키는 기능 <a href="#user-content-fnref-232-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-232-2"> <p>옜날에는 어떻게 한거지? 궁금해서 찾아봤습니다 <a href="#user-content-fnref-232-2" data-footnote-backref="" aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-232-3"> <p>입력필드에서 문자 트리거 <a href="#user-content-fnref-232-3" data-footnote-backref="" aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-232-4"> <p><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a> 컴포넌트 <a href="#user-content-fnref-232-4" data-footnote-backref="" aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-232-5"> <p>의식의 흐름 속 갑자기 생각나버림 <a href="#user-content-fnref-232-5" data-footnote-backref="" aria-label="Back to reference 5" class="data-footnote-backref">↩</a></p> </li> </ol> </section> </div><div class="flex flex-col gap-1 pt-4 text-[10px] text-(--flexoki-400) mt-4"><div class="flex gap-2 overflow-x-auto"><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/editor">#editor</a><a class="px-2 py-1 rounded-lg bg-(--flexoki-950) whitespace-nowrap text-[10px] text-(--flexoki-purple-500) hover:text-(--flexoki-purple-400)" href="/tagged/input">#input</a></div><div class="flex items-center gap-2 py-2"><a class="underline" href="/memo/232">#232</a><time class="text-ellipsis overflow-hidden whitespace-nowrap cursor-" title="편집됨: 2026년 7월 27일 월요일">생성됨: 2022년 12월 5일 월요일</time></div></div></div><div class="overflow-hidden border-2 border-(--flexoki-950) p-[10px] rounded-lg text-sm"><div class="_root_usyu0_2"><div class="flex"><a href="https://developer.chrome.com/docs/css-ui/css-field-sizing?&hl=ko" target="_blank" class="inline-flex flex-col gap-1 p-2 rounded-lg bg-(--flexoki-blue-950) hover:bg-(--flexoki-blue-900) font-bold transition-all"><span class="text-lg">📎</span><p>CSS 필드 크기 조정</p><span class="text-[10px] font-medium">developer.chrome.com</span></a></div> <blockquote> <p><code>field-sizing</code>를 사용하면 콘텐츠를 기반으로 크기 조절을 사용 설정하는 데 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 <code>textarea</code> 외에도 다른 요소에도 적용됩니다.</p> </blockquote> <textarea style="padding:10px;field-sizing:content">textarea, select, input { field-sizing: content; }

#field-sizing #input #textarea #select

#358생성됨: 2025년 1월 12일 일요일

Footnotes