How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Input

Styles

Class name.z-inputis required.


     

     

      

	<div>
		<input type="text" class="z-input" placeholder="default">
		<input type="text" class="z-input" value="readonly" readonly>
		<input type="text" class="z-input" value="disabled" disabled>
	</div>
	<div>
		<input type="text" class="z-input warning" placeholder="warning">
		<input type="text" class="z-input success" placeholder="success">
		<input type="text" class="z-input error" placeholder="error">
	</div>
	<div>
		<input type="text" class="z-input bold" placeholder="bold">
		<input type="text" class="z-input round" placeholder="round">
		<input type="text" class="z-input light" placeholder="light">
	</div>

Icon

To use icons, you must use.z-input-wrapperto wrap the<input>.


     

      

	<div>
		<span class="z-input-wrapper">
			<i class="fa fa-user"></i>
			<input type="text" class="z-input" placeholder="User">
		</span>
		<span class="z-input-wrapper">
			<i class="fa fa-lock"></i>
			<input type="password" class="z-input" placeholder="Password">
		</span>
		<span class="z-input-wrapper">
			<input type="text" class="z-input" placeholder="Date">
			<i class="fa fa-calendar"></i>
		</span>
	</div>

File Input

The file input is to prettify the browser's default file input. You can use the stucture below. The behaviour of the[type=file]element is not changed, just read the file(s) from it.



	<div class="z-input-file">
		<button class="z-btn primary">File...</button>
		<input type="text" class="z-input light" readonly>
		<input type="file">
		<i class="fa fa-close z-remove-file"></i>
	</div>

Add attributemultipleon the[type=file]element for multi-upload.



	<div class="z-input-file">
		<button class="z-btn-outline primary">Select...</button>
		<input type="text" class="z-input light" readonly>
		<input type="file" multiple>
		<i class="fa fa-close z-remove-file"></i>
	</div>

Input Group


  
kg
   

	<div class="z-input-group">
		<input type="text" class="z-input" value="China" style="width:100px">
		<input type="text" class="z-input" value="Beijing" style="width:100px">
		<input type="text" class="z-input" value="Haidian" style="width:100px">
	</div>
	<div class="z-input-group">
		<span class="z-input-addon"><i class="fa fa-user"></i></span>
		<input type="text" class="z-input" style="width:120px">
	</div>
	<div class="z-input-group">
		<span class="z-input-addon">86</span>
		<input type="text" class="z-input" style="width:120px">
	</div>
	<div class="z-input-group">
		<input type="text" class="z-input" value="300" style="width:80px">
		<span class="z-input-addon">kg</span>
	</div>
	<div class="z-input-group">
		<select id="my-select2" style="width: 86px">
			<option value="http">http://</option>
			<option value="https">https://</option>
		</select>
		<input type="text" class="z-input" style="width: 160px">
	</div>

Size

      

	<input type="text" class="z-input small" placeholder="small">
	<input type="text" class="z-input" placeholder="default">
	<input type="text" class="z-input large" placeholder="large">
      

	<span class="z-input-wrapper small">
		<i class="fa fa-search"></i>
		<input type="text" class="z-input small">
	</span>
	<span class="z-input-wrapper">
		<i class="fa fa-search"></i>
		<input type="text" class="z-input">
	</span>
	<span class="z-input-wrapper large">
		<i class="fa fa-search"></i>
		<input type="text" class="z-input large">
	</span>

Textarea

  <textarea class="z-textarea" rows="6" cols="40"></textarea>