CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス

2020/08/24 175 users コリス inpu button要素 CSS スニペット

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む

CSSのみでアコーディオン・2パターン | かちびと.net

2019/06/15 28 users CSS net absolute result checked

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます css input {/*input要素自体は非表示にしておく*/ position: absolute; opacit... 続きを読む

textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」 | かちびと.net

2019/05/03 10 users textarea Twitter jQuery OSS net

Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に選択、投稿できるようにする、というもの。使い方も簡単で、jQueryと本スクリプトを読み込んでtextareaやinput要素など投稿でき... 続きを読む

フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js | コリス

2019/02/27 72 users コリス Clea Reactコンポーネント スクリプト 単体

クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Clea... 続きを読む

軽量で使いやすい非依存のオートコンプリートライブラリ・「autoComplete.js」 | かちびと.net

2018/11/20 16 users スクリプト ロードマップ 使い勝手 印象 リスト

autoComplete.js autoComplete.jsはinput要素で自動補完を実装するためのシンプルなスクリプトです。非依存で軽量、高速なのが特徴みたいです。自動補完用のリストも簡単に作れますので個人的にも扱いやすそうという印象です。また、ロードマップも公開されており、今後さらに使い勝手が良くなりそうなので覚えておくと... 続きを読む

あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方 | コリス

2017/11/21 264 users セレクタ コリス CSS 見た目 要素

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jo... 続きを読む

パスワード用途以外にinput要素のtype="password"を使うのは間違っていない | 富永日記帳

2015/05/03 41 users password F.Ko-Ji セキュリティコード 挙動

パスワード用途以外にinput要素のtype="password"を使うのはどうやら間違っている - F.Ko-Jiの「一秒後は未来」(blog.fkoji.com)に対する返信記事です。当該記事では Chrome の挙動をもとにセキュリティコードの入力欄に type="password" を使うというのが意味的にも間違っていると Chrome は言いたいのだなと解釈しました。と締めていますが、 ... 続きを読む

タスクリストが使えるようになりました - Qiita Blog

2014/10/20 92 users タスクリスト Markdown Qiita TEAM API

こんにちは、 r7kamuraです。 この度、QiitaとQiita:Teamでタスクリストが使えるようになりました。 投稿やコメントの本文において、リスト記法の先頭を [ ] または [x] で開始すると、チェックボックス付きのタスクリストに変換されます。 - [x] サーバ側に更新用のAPIを用意する - [ ] Markdownを変換するとinput要素が出力されるようにする - [ ] チ... 続きを読む

<input type="file">を装飾する時の注意 | バシャログ。

2014/10/15 19 users File input バシャログ input type 装飾

どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:... 続きを読む

Androidでinput要素とlabel要素を紐付けた際のバグ | CodePlus

2014/01/30 13 users 事象 テキスト 入力フィールド 仕様 label要素

バグなのか仕様なのかよく分かりませんが、Androidでlabel要素とinput要素を紐付け、入力フィールドにフォーカスした際にlabel内のテキストが入力フィールド反映されてしまうという事象が起きました。バグなのか仕様なのかよく分かりませんが、Androidでlabel要素とinput要素を紐付け、入力フィールドにフォーカスした際にlabel内のテキストが入力フィールド反映されてしまうという事... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス Compass class

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする) - WEBCRE8.jp

2013/04/26 19 users 応用 WordPress 備忘録 WEBCRE8.jp 検索

調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 考える まとめる 会う 作る 作る 作る datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datal... 続きを読む

HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 ｜ クラスメソッド開発ブログ

2012/12/18 123 users ジェスチャー パフォーマンスチューニング iPhone 機能

モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか  おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト... 続きを読む

input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル | コリス

2012/07/17 210 users コリス チュートリアル grey アイコン オシャレ

Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> ... 続きを読む

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net

2012/07/04 432 users ユーザビリティ jQuery ふーん jQueryスニペット

フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeh... 続きを読む

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

2012/05/21 1011 users jsdo.it jQuery Ginpen.com 共通 要素

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽... 続きを読む

【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ | HTML5でサイトをつくろう

2011/09/22 373 users ユーザーインターフェース フォーム HTML5 ソース 表示

ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下... 続きを読む

firegoby » Blog Archive » 自作WordPressプラグインやテーマ内でメディアアップローダーを使用する

2011/05/16 15 users firegoby a要素 HTML テキストフィールド 手順

いま開発しているプラグインで、テキストフィールドに画像のURLを入力する必要があって、メディアアップローダーからファイルを選択できるようにしました。 以下は、そのための手順です。 HTMLの準備 自作プラグインの管理画面に以下のようなHTMLを記述してください。 ポイントは以下のとおりです。 ファイル名を挿入するinput要素とメディアアップローダーを開くためのa要素を用意する。 a要素のrel属... 続きを読む

Google Chrome11でサポートされた音声入力API - Webtech Walker

2011/04/28 39 users Webtech Walker prefix API 音声 入力

Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっ... 続きを読む

HTML5でinput要素に追加された新しいタイプ13連発 - ＠IT

2011/03/07 525 users iPhone HTML5 テクノロジー 既存 数値

株式会社オープンウェブ・テクノロジー 代表 白石 俊平 2011/3/7HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介。iPhoneで見るとキーボードまで変化するタイプも!?input要素に追加された新しいタイプを用途別に紹介前回の「HTML5で既存のinputタイプに加わった6つの変更点」では、既存の入力タイプ（ 続きを読む

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

2009/03/26 323 users jQuery ビフォア CSS アフター フォーム

Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的... 続きを読む

ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

2007/08/16 592 users ウノウラボ ユーザビリティ miyake Tips フォーム

miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場... 続きを読む

選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」:phpspot開発日誌

2006/11/08 116 users JavaScriptライブラリ phpspot開発日誌

選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 2006年11月09日 Highlight active input This script is easy to configure. All you have to do is to define how the active input should be highli... 続きを読む