創建像Zoho CRM形式的CSS

Question

請通過鏈接並讓我知道如何創建像Zoho CRM這樣的表單。 可以使用CSS來完成嗎？ https://crm.zoho.com/crm/CreateEntity.do?module=Contacts 在此先感謝。

Answer 1

我想你問的，如文本輸出方法，這裏是得到它的方式..

HTML：

<div> 
    <input type="text" class="inputText" required/> 
    <span class="floating-label">Your email address</span> 
    </div> 

的CSS：

input:focus ~ .floating-label, 
input:not(:focus):valid ~ .floating-label{ 
    top: 0px; 
    bottom: 10px; 
    left: 20px; 
    font-size: 6px; 
    opacity: 1; 
} 

.inputText { 
    font-size: 14px; 
    width: 200px; 
    height: 35px; 
} 

.floating-label { 
    position: absolute; 
    pointer-events: none; 
    left: 20px; 
    top: 18px; 
    transition: 0.2s ease all; 
}