すぐ忘れちゃう系CSS

ときどき更新。

transform

移動

transform:translate()

移動させて上下中央

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)

IE10以降でselectの矢印ボタンを非表示

select::-ms-expand {
	display: none;
}

input[type=number]でSpinnerを出さない

input[type=number] {
    -moz-appearance:textfield; //Firefox対策
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    appearance: none;
}

参考：jquery - Hide Spinner in Input Number - Firefox 29 - Stack Overflow

flex

上下中央

align-items: center

否定

classがないとき

Ele:not(.isActive)

transform系

rotate：回転

//反時計回りに90度
transform: rotate(90deg)

//時計回りに90度
transform: rotate(-90deg)

transform-origin：変形の中心

デフォルトは50%,50%

iphoneやiPadでスクロールを表示

::-webkit-scrollbar    //スクロールバー全体        
::-webkit-scrollbar-button      //ブラウザによって違いますが上下の矢印
::-webkit-scrollbar-track       //スクロールバーのある部分
::-webkit-scrollbar-track-piece      //スクロールバーが表示されてない部分
::-webkit-scrollbar-thumb      //スクロールバー本体 
::-webkit-scrollbar-corner      //角のとこ    
::-webkit-resizer                    //角のとこ

参考：(K)iPhoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで | web(K)campus

フォームの変な色系

【Chrome】オートコンプリートのとき、背景を黄色（もしくは水色）にしない - Qiita

Safariでinput:disabledの時のcolorが淡く見える

//css
input:disabled {
    color: [テキストの色];
    -webkit-text-fill-color: [テキストの色];
    opacity: 1;
}

//scss
@mixin disabled-color($color) {
    color: $color;
    -webkit-text-fill-color: $color;
    opacity: 1;
}

改行系

単語で改行

word-break: keep-all

改行禁止

white-space: nowrap;

長い単語やURL,アドレスを改行

word-break: break-all;
word-wrap: break-word;

flex内で改行が効かない時（特にIEとか）

word-break: break-all;
width: 100%; //flex:1の時はこれで。それ以外の時は適宜指定

参考：`word-wrap:break-word;`がflexboxで効かない件 - Qiita

テキストを1行で…省略

width: XXXX; //必ず指定
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

display: flexのとき（直接）

どうやっても効かないようなので、display: table-cellなどに変更する

display: flexのとき（子要素）

flex: xxx;
min-width: 0;

html - text-overflow ellipsis not working in nested flexbox - Stack Overflow

複数行で…

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

無効系

フォームのデフォルトスタイルを無効にする

appearance: none

画像や文字を選択させない

user-select: none

スマホで長押しのポップアップ無効にする

-webkit-touch-callout: none;

スマホでテキスト長押しの選択ボックスを無効にする

webkit-user-select: none;

要素のクリック動作を無効にする

pointer-events : none;

animationの終了時に終了時の状態を維持する

animation-fill-modeをforwardsにする

animation: anim 2.5s ease-in-out .5s forwards;

参考：keyframeアニメーション終了時に終了時の状態を維持する - みかづきブログ その3

テキストの下線のスタイル調整

色を変える

text-decoration-color: blue;

波線や二重線などスタイルを変更

text-decoration-style: wavy; //波線
text-decoration-style: double; //二重線
text-decoration-style: dashed; //破線
text-decoration-style: dotted; //点線

線の太さを変える

text-decoration-thickness: 3px;

下線と文字の重なり方

text-decoration-skip-ink: none; //下線を途切れさせない

線と文字の距離

text-underline-offset: 5px;