表单样式

input

      .input {
        outline: none;
        border: 1px solid #ccc;
        border-radius: 5px;
        /* 让文字在输入框内存在间隙 */
        padding: 0 10px;
        height: 30px;
        width: 200px;
      }
      .input:focus {
        border: 1px solid #010e1c;
      }
      .input:disabled {
        background: #e8ecee;
        cursor: not-allowed;
      }
      .input::placeholder {
        color: #9ca3af;
      }

textarea

textarea可以认为是特殊的输入框。

    <textarea class="input" placeholder="请输入内容">123</textarea>

      .input {
        outline: none;
        border: 1px solid #ccc;
        border-radius: 5px;
        /* 让文字在输入框内存在间隙 */
        padding: 0 10px;
        height: 30px;
        width: 200px;
      }
      .input:focus {
        border: 1px solid #010e1c;
      }
      .input:disabled {
        background: #e8ecee;
        cursor: not-allowed;
      }
      .input::placeholder {
        color: #9ca3af;
      }
      textarea.input {
        height: 100px;
        /* 禁用拖拽改变高度 */
        resize: none;
      }