CSSのかどまる、背景色などが正常に表示されないとき、以下プロパティを1行追加することで正常に表示されるようになります。
-webkit-appearance: none;
[参考]
http://c-brains.jp/blog/wsg/11/01/26-100336.php
[確認環境]
iPad iOS7
「HTML/CSS」カテゴリーアーカイブ
HTML/CSSに関する記事です。
[HTML/CSS]テーブルの注意点
border-collapse:collapse; があると padding:; は反映されないことに注意する。
border-collapse:separate; とするか、プロパティ自体を削除する。（separateがデフォルト値の為）
|
1 2 3 4 |
table.sample { border-collapse:collapse; padding:100px; } |
|
1 2 3 4 5 |
div.sample { display:table; border-collapse:collapse; padding:100px; } |
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のテキストボックスの入力文字種を指定する方法 Yahoo!ケータイ softbank端末
・mode属性を使う。
mode=”hiragana” 全角かなモード
mode=”katakana” 全角カナモード
mode=”alphabet” 半角英字モード
mode=”numeric” 半角数字モード
|
1 2 3 |
<form action="#"> <input type="text" mode="numeric" value="" name="" id="" /> </form> |
[参考]
http://www.plusmb.jp/2008/10/24/948.html
http://www.abe-tatsuya.com/web_prog/mobile_web/input_attributes.php
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のテキストボックスの入力文字種を指定する方法 i-mode docomo端末
・istyle属性を使う。
istyle=”1″ 全角かなモード
istyle=”2″ 半角カナモード
istyle=”3″ 半角英字モード
istyle=”4″ 半角数字モード
|
1 2 3 |
<form action="#"> <input type="text" istyle="4" value="" name="" id="" /> </form> |
[参考]
http://www.plusmb.jp/2008/10/24/948.html
http://www.abe-tatsuya.com/web_prog/mobile_web/input_attributes.php
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のテキストボックスの入力文字数を指定する方法 Yahoo!ケータイ softbank端末
・maxlength属性を使う。数値＝文字数として扱われる。
※i-mode docomo端末のみは、数値＝バイト数として扱われる。
※i-mode docomo端末以外は、数値＝文字数として扱われる。（PC、スマホ含む）
|
1 2 3 |
<form action="#"> <input type="text" maxlength="3" value="" name="" id="" /> </form> |
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のテキストボックスの入力文字数を指定する方法 EZweb au端末
EZweb au端末には二つの方法があるようです。
・format属性を使う。数値＝文字数となる。
|
1 2 3 |
<form action="#"> <input type="text" format="3N" value="" name="" id="" /> </form> |
・maxlength属性を使う。数値＝文字数として扱われる。
※i-mode docomo端末のみは、数値＝バイト数として扱われる。
※i-mode docomo端末以外は、数値＝文字数として扱われる。（PC、スマホ含む）
|
1 2 3 |
<form action="#"> <input type="text" maxlength="3" value="" name="" id="" /> </form> |
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のテキストボックスの入力文字数を指定する方法 i-mode docomo端末
・maxlength属性を使う。数値＝バイト数として扱われる。
※i-mode docomo端末のみは、数値＝バイト数として扱われる。
※i-mode docomo端末以外は、数値＝文字数として扱われる。（PC、スマホ含む）
|
1 2 3 |
<form action="#"> <input type="text" maxlength="" value="" name="" id="" /> </form> |
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）メール入力用テキストボックスのコード
|
1 2 3 4 |
<form action="#"> <font size="2" color="#000000">メールアドレス<input type="text" size="6" istyle="3" format="*x" mode="alphabet" value="" name="" id="" /><br /> <input type="submit" value="登録" name="" id="" /><br /></font> </form> |
以下の機能を満たしています。
・フォームボタンとテキストボックスのフォントサイズ＝2、カラー＝#000000（黒）
・半角英字モード（auのみ小文字半角英数字）
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）
[参考]
http://www.plusmb.jp/2008/10/24/948.html
http://www.abe-tatsuya.com/web_prog/mobile_web/input_attributes.php
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）のinput要素の大きさを指定する方法
・fontタグに size=””（1～の数字を入力する）を指定して、まるっと囲うことでinput各要素大きさが変更されることが確認できる。
・inputタグに size=””（1～の数字を入力する）を指定すると、input各要素に応じて幅や高さが変更されることが確認できる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="#"> <font size="2" color="#000000"> <select name="" id=""> <option value="">セレクトボックス</option> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> </select><br /> <input type="checkbox" value="" name="" id="" /><br /> <input type="radio" value="" name="" id="" /><br /> <input type="text" value="" name="" id="" /><br /> <input type="password" value="" name="" id="" /><br /> <input type="submit" value="フォームボタン" name="" id="" /><br /> </font> </form> |
[HTML/CSS]ケータイサイト（携帯サイト/ガラケーサイト）の電話番号入力用テキストボックスのコード
|
1 2 3 4 |
<form action="#"> <font size="2" color="#000000">TEL<input type="text" size="6" istyle="4" format="4N" mode="numeric" maxlength="4" value="" name="" id="" />-<input type="text" size="6" istyle="4" format="4N" mode="numeric" maxlength="4" value="" name="" id="" />-<input type="text" size="6" istyle="4" format="4N" mode="numeric" maxlength="4" value="" name="" id="" /><br /> <input type="submit" value="登録" name="" id="" /><br /></font> </form> |
以下の機能を満たしています。
・フォームボタンとテキストボックスのフォントサイズ＝2、カラー＝#000000（黒）
・半角数字モード
・入力桁数制限（TEL[4桁]-[4桁]-[4桁]）
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）
[参考]
http://www.plusmb.jp/2008/10/24/948.html
http://www.abe-tatsuya.com/web_prog/mobile_web/input_attributes.php
http://www.symmetric.co.jp/blog/archives/109