semantic-ui input box

1. Standard input box

　　To define an input box in semantic-ui, the input tag needs to be included in another tag. The class of the outer tag is ui input. Note that the outer tag can be div, span, p, i.

<div class="ui input">
	<input type="text" placeholder="please input_div">	
</div>
<span class="ui input">
	<input type="text" placeholder="please input_span">	
</span>
<i class="ui input">
	<input type="text" placeholder="please input_i">	
</i>
<p class="ui input">
	<input type="text" placeholder="please input_p">	
</p>

　　

2. Change the state of the input box

　　focus means selected (active), disabled means disabled, error means error.

<div class="ui input">
	<input type="text" placeholder="please input_div">	
</div>
<span class="ui input focus">
	<input type="text" placeholder="please input_span">	
</span>
<i class="ui input disabled">
	<input type="text" placeholder="please input_i">	
</i>
<p class="ui input error">
	<input type="text" placeholder="please input_p">	
</p>

　　

 

 

3. Use the icon with the input box

　　First look at a wrong usage :

<div class="ui input">
  	<input type="text" placeholder="Search...">
	<i class="search icon"></i>
</div>

　　

　　As you can see, the search icon is not integrated with the input box. If you want them to be merged together, that is, there is an icon inside the input box, an icon must be added to the outer class, indicating that this is an input box with an icon.

<div class="ui icon input">
  	<input type="text" placeholder="Search...">
	<i class="search icon"></i>
</div>

　　

 

4. Specify the location of the icon in the input box

　　Just add a word representing position to the outer class, such as left, right. Do not try to add left or right to the label of the icon, it will fail.

<div class="ui left icon input">
  	<input type="text" placeholder="Search...">
  	<i class="search icon"></i>
</div>

　　

 

5. Combination of input box and label

　　It is the same as using the chart above

<div class="ui labeled input">
	<div class="ui label">
		http://
	</div>
	<input type="text" placeholder="url">
</div>

 

6. Set the size

　　There is nothing to say, just add a word indicating size to the class of the outer label.

<div class="ui big labeled input">
	<div class="ui label">
		http://
	</div>
	<input type="text" placeholder="url">
</div>