CSSのTips

ラジオボタンがdisabledだったら隣の文字の色を変たい

相談されてハマって悩んだ

<label><input type="radio" disabled><span>ここの文字を変えたい</span></label>
label input[disabled] + span {
 color: #ccc;
}

iOSで横に向けたときに文字サイズが大きくならないようにする

body {
 -webkit-text-size-adjust: none;
}

:visitedで背景画像が変更できない

iOSで:visitedが効かない

  • 色々試したけど、リンク先が パラメータ付きのURLだと訪問済みにならない 気がする……。(iOS8 Safari)

iOS系でinputのデザインが独自になる

input {
   -webkit-appearance: none;
   border-radius: 0;
}

でリセット

Android4系でwidthが効かない

background-color:#fff;で改善することがある

hover時にopacityを使うとFirefoxで画像が歪む

img{background:#fff;}

または

img:hover{background:#fff;}

で解決

preにoverflow:auto;を指定するとIE6-7でずれる?

フォントサイズについて

CSSでフォントサイズを指定した場合、OSやブラウザごとに表示が異なる場合があります。特にメイリオフォントのIE8とMacのSafariは思ったより大きい表示になるので実際に確認したほうがいいと思います。

フォントサイズ検証ページで、実際に環境を持っている人は各自検証してみて下さい。

参考

その他


最終更新: 2017-10-15 (日) 22:57:02