appearance－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 /* 主な値 */ div.prefix_appearance_normal { -moz-appearance:normal; -webkit-appearance:normal; -o-appearance:normal; -ms-appearance:normal; } div.prefix_appearance_icon { -moz-appearance:icon; -webkit-appearance:icon; -o-appearance:icon; -ms-appearance:icon; } div.prefix_appearance_window { -moz-appearance:window; -webkit-appearance:window; -o-appearance:window; -ms-appea
CSSを使ってcheckboxやradioの見た目をキュートに変える方法 | 三重県のデザイン会社 エコムクリエーション
エンジニアの山岡です。 お問い合わせなどのフォームをCSSで装飾する時、inputやtextareaはサクッと見た目を変えられますが、checkboxやradioは一筋縄ではいきません。 イマイチなデフォルトスタイルから…… デフォルトスタイルのcheckboxとradio ラブリーでキュートかつ、クールでアメイジングでスタイリッシュなチェックボックスやラジオボタンにしたい！ CSSでスタイリングしたcheckboxとradio そんな時は、labelとinput[type=checkbox]（またはinput[type=radio]）を組み合わせて実装する方法がオススメです。 サンプル1: キュートなチェックボックス・ラジオボタンサンプル2: より主張する＆「押した感」をプラスサンプル3: チェックした瞬間の動きで「遊び」と「楽しさ」をプラス サンプル1 こちらは、いなべ山女子フェスタ公
selectとoptionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】
select optionとは？ select optionとは、<select>タグの<option>タグのことで、画面上の見た目では選択式メニューの選択肢にあたります。 主に入力フォームで複数の選択肢から1つを選ばせるときに使用します。 プルダウン式の選択式メニュー、またはリスト型の選択式メニューを設置することが可能です。 [PR] Webデザインで副業する学習方法を動画で公開中 select optionの書き方 <select>タグを使用したプルダウン型の選択式メニューは、次のように書きます。 HTML： <select name="住所"> <option value="tokyo">東京都</option> <option value="kanagawa">神奈川県</option> <option value="chiba">千葉県</option> <option valu
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
IE11 で disabled 属性の select 要素の color (文字色)を変える。 - Qiita
簡易メモ disabled 属性の select 要素は border や background-color と共に指定すると文字色が変わらない！ <select> <option>Normal</option> </select> <select disabled> <option>Disabled</option> </select> select { color: red; border: solid 1px black; background-color: orange; } select:disabled { color: blue; border: 1px solid black; background-color: orange; }
CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net
Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css/* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; text-align: center; padding: 9px 4px; background-color: #03A9F4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0
セレクトボックスのテキストを中央寄せにするためのCSS | TechMemo
先日、以下のようなセレクトボックスを作成してほしいという依頼があり、どうしたものかとちょっと頭を悩ませました。 というのも、セレクトボックスには「text-align:center;」が効かないんですよね。それに、三角形の色も変えないといけないです。そのため、上記のようなセレクトボックスを実現するには、一工夫必要なわけです。 なんとかCSSだけで実現することができたので、その方法を備忘録として残しておきたいと思います。簡単なデモも用意しましたので、挙動についてはデモページをご確認ください。 デモページを見る セレクトボックスのテキストを中央寄せにするための方法を解説していきます。 まずは、HTML側は通常通りセレクトボックスをマークアップして、直前に表示用のdiv要素を記述しておきます。セレクトボックスと直前のdiv要素を重ねて、セレクトボックスを透過することで、中央寄せを実現します。 <
[css,html5] placeholder属性のテキストカラーを変更 - Qiita
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */ :placeholder-shown { color: red; } /* Google Chrome, Safari, Opera 15+, Android, iOS */ ::-webkit-input-placeholder { color: red; } /* Firefox 18- */ :-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: red; opacity: 1; } /* IE 10+ */ :-ms-input-placeholder { color: red; } ::-webkit-inp
![[css,html5] placeholder属性のテキストカラーを変更 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fba9d030dcc96d969890514ded69e5eb0165eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCY3NzJTJDaHRtbDUlNUQlMjBwbGFjZWhvbGRlciVFNSVCMSU5RSVFNiU4MCVBNyVFMyU4MSVBRSVFMyU4MyU4NiVFMyU4MiVBRCVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MiVBQiVFMyU4MyVBOSVFMyU4MyVCQyVFMyU4MiU5MiVFNSVBNCU4OSVFNiU5QiVCNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDQwNWViYmExN2I0ZGFkN2E3ODNiYmZhYTBmNzMxYjU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG1pYW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZjNiZWQyNTQ2ZTdiMTZmNGFlNzc3ODA3MDhiMzBhMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcfd6479d647ab6d0a17b7b52c4c901a7)
CSSだけで<select>をカスタマイズする - Qiita
Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択
CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge
セレクトボックス（select要素）のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を整えることができるようなので機会があれば試してみてはいかがでしょうか。 <div class="select-box01"> <select> <option value="">セレクトボックス01</option> <option value="">選択肢01</option> <option value="">選択肢02</option> <option value="">選択肢03</option> <option value="">選択肢04</option> <option value="">選択肢05</option>
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
![[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox](https://cdn-ak-scissors.b.st-hatena.com/image/square/1dd910b325a6cc2c3c080f26dc7ac70824dc0015/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110701.png)
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
inputタグでdisabledした要素のデザインを変更 | KH-WEBLOG - コーディング・プログラミング・WEB制作ブログ
<input type="text" name="text1" id="text1" disabled="disabled" /> フォーム内でdisabledがついた要素は入力できない状態になりますが、 このdisabledの状態のデザインをCSSで簡単に変更できるようなので そのやり方をメモ。 CSSの記述 :disabled擬似クラスと:enabled擬似クラスを使います。 :disabledはdisabled=”true“の状態の時に使用。 :enabledはdisabled=”false“の状態の時に使います。 個人的には:enabledのほうは使う機会はあまりない気がしますが・・・。 記述方法は :disabled { background-color: #cccccc; } 個別に指定したい場合は #text1:disabled { background-color: #cc
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
Animated Input Labels with Pure CSS/CSS3 | CSS Script
<input type="number">のスピンボタン（右のボタン）を消す方法 - Qiita
Formのdisable、readonly属性でスタイルを変える - EC-CUBEのカスタマイズ、ネットショップ制作メモ
