CSS小問題與解決方案記錄（長期更新）

緣氏集團技術員發表於2018-06-02
CSS

設定 letter-spacing 之後無法準確居中

  • 設定 text-indent 與 letter-spacing 值一致
    text-indent: 20px;
    letter-spacing: 20px;
複製程式碼

修改 input 填寫後背景為淺黃色

  • 設定 input:-webkit-autofill
    input:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset !important
    }
複製程式碼

去除 textarea 右下三角圖示

  • 設定 resize
    textarea {
      resize: none
    }
複製程式碼

設定 textarea 行間距

  • 設定 line-height ( 值沒有px,設定的是倍數 )
    textarea {
      line-height: 1.5
    }
複製程式碼

設定 input 與 textarea 的 placeholder 樣式

  • 設定
  // WebKit, Blink, Edge
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #a7adbb
  }
  // Mozilla Firefox 4 to 18
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #a7adbb
  }
  // Mozilla Firefox 19+
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #a7adbb
  }
  // Internet Explorer 10-11
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #a7adbb
  }
複製程式碼

設定 flex 模型水平居中

  • 設定 align-items
    align-items: center
複製程式碼

設定 flex 模型垂直居中

  • 設定 justify-content
    justify-content: center
複製程式碼

設定 flex 模型列排布

  • 設定 flex-direction
    flex-direction: column
複製程式碼

設定 flex ：1 時 overflow 失效

  • 設定 height 或 width (根據在哪個方向需要出現滾動條)
    flex: 1;
    width: 0;
    height: 0;
複製程式碼

設定頁面內容選中

  • 設定 user-select
    // 禁止選中
    user-select: none
    // 可選中文字
    user-select: text
    // 受邊界限制的文字
    user-select: element
    // 所有可選
    user-select: all
複製程式碼

checkbox 大小設定

  • 設定 transform
    transform: scale(2)
複製程式碼

CSS 禁用滑鼠點選事件

  • 設定 pointer-events
    pointer-events: none
複製程式碼

p 標籤強制不換行

  • 設定 white-space
    white-space: nowrap
複製程式碼

相關文章