ប្រអប់បញ្ចូលចំនួនប្រាក់
ប្រអប់សម្រាប់សរសេរប្រាក់ — លេខធំ មានក្បៀសរាល់បីខ្ទង់ ហើយឃើញចំនួននៅសល់ផង។
មើលជាមុនផ្ទាល់
ប្រភព
<div class="dc-amt">
<label class="dc-amt__label" for="dc-amt-a">보낼 금액 (원)</label>
<div class="dc-amt__field">
<input class="dc-amt__input" id="dc-amt-a" type="text" inputmode="numeric" autocomplete="off" value="150,000" aria-describedby="dc-amt-a-b" />
<span class="dc-amt__unit" aria-hidden="true">원</span>
</div>
<p class="dc-amt__bal" id="dc-amt-a-b">출금 가능 2,480,000원</p>
<div class="dc-amt__quick">
<button class="dc-amt__chip" type="button">+1만</button>
<button class="dc-amt__chip" type="button">+5만</button>
<button class="dc-amt__chip" type="button">+10만</button>
<button class="dc-amt__chip" type="button" aria-pressed="false">전액</button>
</div>
</div>.dc-amt { padding:var(--dc-4); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-amt__label { display:block; margin-bottom:var(--dc-2); font-size:14px; font-weight:600; color:var(--dc-text-sub); }
.dc-amt__field { display:flex; align-items:baseline; gap:var(--dc-2); padding-bottom:var(--dc-2); border-bottom:2px solid var(--dc-line-field); }
.dc-amt__field:focus-within { border-bottom-color:var(--dc-brand); }
.dc-amt__input { flex:1; min-width:0; width:100%; padding:0; border:0; background:transparent; color:var(--dc-text); font-family:var(--dc-font); font-size:34px; font-weight:700; line-height:1.2; text-align:right; font-variant-numeric:tabular-nums; }
.dc-amt__input::placeholder { color:var(--dc-text-mute); }
.dc-amt__input:focus { outline:none; }
.dc-amt__unit { flex:none; font-size:20px; font-weight:600; color:var(--dc-text-sub); }
.dc-amt__bal { margin:var(--dc-2) 0 0; font-size:13px; color:var(--dc-text-mute); text-align:right; }
.dc-amt__err { margin:var(--dc-2) 0 0; font-size:13px; font-weight:600; color:var(--dc-danger); text-align:right; }
.dc-amt__field.is-error { border-bottom-color:var(--dc-danger); }
.dc-amt__field.is-error .dc-amt__input { color:var(--dc-danger); }
.dc-amt__quick { display:flex; gap:var(--dc-2); margin-top:var(--dc-4); }
.dc-amt__chip { flex:1; min-height:44px; padding:0 var(--dc-1); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text); font-family:var(--dc-font); font-size:14px; font-weight:600; }
.dc-amt__chip:hover { background:var(--dc-sunken); }
.dc-amt__chip[aria-pressed="true"] { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-amt__pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--dc-2); margin-top:var(--dc-4); padding-bottom:var(--dc-safe-bottom); }
.dc-amt__key { min-height:52px; border:0; border-radius:var(--dc-r-md); background:var(--dc-sunken); color:var(--dc-text); font-family:var(--dc-font); font-size:22px; font-weight:600; }
.dc-amt__key:active { background:var(--dc-brand-soft); color:var(--dc-brand-text); }របៀបប្រើ
- ដាក់លេខទំហំ ២៤px ឬធំជាង ហើយបែងចែករាល់បីខ្ទង់ដោយក្បៀស
- ចំនួនដែលប្រើញឹកញាប់ ដាក់ជាឈីប ឲ្យចុចពីរដងចប់
- សរសេរចំនួននៅសល់ក្រោមប្រអប់ ហើយបើលើស ត្រូវប្រាប់នៅទីនោះ
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- បង្ហាញឯកតាប្រាក់ក្នុងប្រអប់ និងក្នុងស្លាកផង — មានតែលេខ គេត្រូវទាយ
- បើគ្មាន inputmode=numeric ក្តារចុចអក្សរនឹងឡើង