CSS: input-group

.instui-input-group — Lớp vỏ xung quanh một ô nhập văn bản với các khe biểu tượng ở phía trước và phía sau.

Bọc cùng kiểu khung trường như text-input với các khe biểu tượng ở hai bên; -should-not-wrap chỉ cần khi nội dung của nhóm sẽ tràn sang dòng thứ hai.

Source: input-group.css

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/input-group.css";

Các ví dụ

<span class="instui-input-group">
  <span class="before">@</span>
  <input type="text" placeholder="username">
</span>

Bộ sửa

Bộ sửa	Mô tả
.-disabled	Trạng thái bị vô hiệu hóa.
.-invalid	Trạng thái không hợp lệ (lỗi).
.-readonly	Trạng thái chỉ đọc.
.-should-not-wrap	Giữ nhóm trên một dòng (không xuống dòng).
.-size-large	Lớn. Bút danh dài của -size-lg.
.-size-lg	Lớn.
.-size-md	Trung bình.
.-size-medium	Trung bình. Bí danh dạng dài của -size-md.
.-size-sm	Nhỏ.
.-size-small	Nhỏ. Bút danh dài của -size-sm.
.-success	Trạng thái thành công (hợp lệ).

Phần

Phần	Mô tả
.after	Khe nội dung phía sau.
.before	Khe nội dung phía trước.

Phần tử giả

Phần tử giả	Mô tả
::placeholder	Văn bản giữ chỗ của ô nhập bên trong, hiển thị với màu nhạt.

Trạng thái

Trạng thái	Mô tả
:disabled	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-text-input-background-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-text-input-background-disabled-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-text-input-background-hover-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-text-input-background-readonly-color	<color>	LightDarklight-dark(#C7CACD, #6A7883)
--instui-component-text-input-border-color	<color>	LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-text-input-border-disabled-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-text-input-border-hover-color	<color>	LightDarklight-dark(#334450, #7E8792)
--instui-component-text-input-border-radius	<length>	0.75rem
--instui-component-text-input-border-readonly-color	<color>	#8D959F
--instui-component-text-input-border-width	<length>	0.0625rem
--instui-component-text-input-error-border-color	<color>	LightDarklight-dark(#CF1F24, #F56050)
--instui-component-text-input-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-text-input-font-size-lg	<length>	1.25rem
--instui-component-text-input-font-size-md	<length>	1rem
--instui-component-text-input-font-size-sm	<length>	0.875rem
--instui-component-text-input-gap-content	<length>	0.75rem
--instui-component-text-input-height-lg	<length>	3rem
--instui-component-text-input-height-md	<length>	2.5rem
--instui-component-text-input-height-sm	<length>	2rem
--instui-component-text-input-padding-horizontal-lg	<length>	0.75rem
--instui-component-text-input-padding-horizontal-md	<length>	0.75rem
--instui-component-text-input-padding-horizontal-sm	<length>	0.5rem
--instui-component-text-input-placeholder-color	<color>	LightDarklight-dark(#5F6E7A, #7E8792)
--instui-component-text-input-success-border-color	<color>	LightDarklight-dark(#037D37, #3EA75B)
--instui-component-text-input-text-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-text-input-text-disabled-color	<color>	LightDarklight-dark(#8D959F, #9EA6AD)
--instui-component-text-input-text-readonly-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-focus-outline-color	auto | <color>	—
--instui-focus-outline-color-danger	auto | <color>	—
--instui-focus-outline-color-success	auto | <color>	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-radius	<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—

Liên quan

• text-input — Bọc một ô nhập văn bản, thêm các khe biểu tượng phía trước và phía sau.