mania-ku

何か作りたいプログラマ未満。

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Advent calendar】Androidの文字を太字にする方法2種

これはadvent calendar8日目の記事です。
7日目の昨日はブログを更新する便利ツールでした。

Android2系では日本語が太字にできないのですが、それの解決法2種です。

text-shadowで太字風にする

たぶんいろんなサイトでよく使われている方法です。
でも若干にじんじゃうんです・・・

text-shadow:1px 0 1px 色

font-familyをmonospaceにする

これは今回調べていて見つけた方法です。
太字にしたいところだけ太字指定と一緒にfont-familyを指定するだけです。

font-family: monospace;
font-weight: bold;

これだと太文字していできなかった機種もできました。理由は不明です・・・
ただし、iPhoneでHelveticaを使いたいなら、振り分けが必要です。
参考:Android スマートフォンの文字を太字にする場合|栃木県宇都宮市のWEBデザイナーの備忘録

9日目の明日はカンマ区切りの金額の正規表現です。
へばのー;)

【Advent calendar】iPhone/iPadでlabelを使う方法

アドベントカレンダーの時期に、毎日ブログ書こうかなーと思っていたら、旦那さんが掃除中にMac Book Proを割ってしまいました。
しょうがないので?旦那さんにAir与えてみて(クリスマスプレゼント)、修理中はそれを借りることにします。(英字キーボード使いにくい…)
なるべく20日間毎日更新できるように頑張ります!そのため、題材は自由です。

1日目の今日は「iPhone/iPadでlabelを使う方法」です。

私はフォームにはなるべくlabelをつけて、押しやすくしたい方です。ユーザビリティってやつです。
ただiPhone/iPadではそのままでは動きません。
ぐぐったところ、2つ解決策があるようです。

イベントを追加

labelにonclick=””を追加します。

<label for="checkbox" onclick=""></label>

CSSを追加

labelのCSSにcursor: pointer;を追加します。こちらは今回の記事を書こうとして、もう一度調べたら見つけたもの。
こちらのほうだと一箇所で解決するので、簡単で良さそうです。
普段使うreset.cssやnormalize.cssに追加しておいてもいいかもしれませんね。

label {
	cursor: pointer;
}

なお、この記事はlabelタグを設定した領域が、iPhoneでタップしても反応しない件を参考に書きました。
明日はdisplay: box内で改行する方法について書く予定です。
see you next 😉