css - 创建类似 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;
}