::-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?

autocomplete="one-time-code" 사용자가 SMS 메시지를 수신 할 때마다, 운영 체제는 SMS에서 OTP 구문을 분석하고 키보드는 OTP를 제안합니다. iOS, iPadOS 및 macOS의 Safari 12 이상에서만 작동하지만 해당 플랫폼에서 SMS OTP 환경을 쉽게 개선할 수 있는 방법이므로 사용하는 것이 좋습니다.

<input 
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  pattern="\d{6}"
  required
/>

const otp = await navigator.credentials.get({
  otp: {
    transport: ['sms']
  }
})

input.value = otp.code

참고

• SMS OTP form best practices
• Apple Developer Documentation
• HTML attributes to improve your users’ two factor authentication experience

• react-mentions¹
• tribute²
• react-input-trigger³
• react-contenteditable⁴
• draft-js⁵

---

Footnotes

1. textarea에서 특정 키입력이 발생할 경우 액션(멘션)을 발생시키는 기능 ↩

2. 옜날에는 어떻게 한거지? 궁금해서 찾아봤습니다 ↩

3. 입력필드에서 문자 트리거 ↩

4. contenteditable 컴포넌트 ↩

5. 의식의 흐름 속 갑자기 생각나버림 ↩

https://developer.chrome.com/docs/css-ui/css-field-sizing?&hl=ko

field-sizing를 사용하면 콘텐츠를 기반으로 크기 조절을 사용 설정하는 데 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 textarea 외에도 다른 요소에도 적용됩니다.

textarea, select, input { field-sizing: content; }