CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ
CSS3ではjQuery等を使用しなくてもフォームパーツ(input,checkbox,etc…)を自由自在にカスタマイズ出来ます。 デフォルトだと、以下の様な好きなデザインに変更が可能です。 ↓カスタマイズ カスタマイズするには魔法の記述、 -webkit-appearance: none; を加えれば、デフォルトの設定を全てリセットすることが出来、自由自在にカスタマイズすることが出来ます。 そう。CSS3ならね。(iPad風) -webkit-appearance: none;でリセットすれば、 以下の様なチェックボックスも作成可能です。 ↓ ↓ CSSでフォームパーツをカスタマイズ – jsdo.it – share JavaScript, HTML5 and CSS
Form Elements: 40+ CSS/JS Styling and Functionality Techniques - noupe
Form Elements: 40+ CSS/JS Styling and Functionality Techniques Designing effective web forms isn’t easy, as we need to figure out more practical styling and functionality techniques to provide a great user experience. Recently there have been a number of noteworthy techniques such as styling different form fields, live validation, Context highlighting, trading options from field to another, slider
人力検索はてな - 入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構で
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
Safari限定、input type=”search” | なつみかん。
Safari限定、input type=”search” 2005.11.02 Wednesday 主にDashboardで使われるSafariの独自拡張 <input type="search"/> ですが、そろそろWeb上でも普及してほしいのでエントリしてみます。 コレを使うメリットとしては 何と言っても見た目がカッコイイ 虫眼鏡付きなので検索窓と分かりやすい 検索履歴およびクリア（×）ボタンが付く事によるユーザビリティの向上 とにかくカッコイイ などが挙げられます。Safari限定だしValidな文書じゃなくなると言われたらそれまでですが、CaminoやIEなど他のブラウザでは普通に長方形のフォームになりますし、特にMacネタの多いブログ（サイト）ではMacユーザーの比率も多めだと思いますので、検索窓にコレを採用してみる価値はあると思います。 以下、属性など。 属性一覧 autosa
http://www.k-jouhou.info/~kanri-gamen/html/form_preview.html
Home Info Page is active! © 2019
Styling even more form controls | 456 Berea Street
This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post. In short, this is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms. I’ve taken screensho
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
Online Generators | Developer's Toolbox | Smashing Magazine
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges. Neatly packed in a gorgeous hardcover, the book featur
JavaScript,ダイナミックHTMLサンプル-フォームコントローラ
Dynamic HTMLの参考書 Java Scriptの参考書 フォームコントローラ 機能 一般的なフォームは初期値から内容が変更されても見かけ上、何の変化もありません。 ユーザーインターフェースを考えた際に、この見栄えが変わることで良いこともあります。 これを実現したサンプルになります。 フォームの各コントロールの内容が初期値から変更されたときに、背景色を変更します。 類似サンプル なし 利用方法 フォーム全体をイベントハンドラし、４つの関数をコールしています。 全てを使っても良いですし、必要に応じて必要な関数のみを使用しても構いません。 ただし、フォーム、その各コントロールに対して名前を指定しています。 各関数ではこの名前を直接記述していますので、name属性値に合わせて内容を変更する必要があります。 chgText テキスト用関数 chgRadio ラジオボタン用関数 chgChe
C82 ? art, the web, and everything in between: Check it, don't select it
By Nicholas Rougeux, posted on December 17, 2005 in CSS, Web Usability and accessibility are all the rage right now and that's great because it's slowly making the web a better place. Unfortunately, some of the goodies in our bags of tricks aren't quite up to snuff when it comes to these two areas. One such goody is the good old select element—specifically with the multiple attribute enabled. How
CSSベースのクールなフォーム、サンプル集:phpspot開発日誌
Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフォーム、サンプル集。 デザインにしにくい部分だからこそ、凝っておくと玄人受けはよい筈。色々なデザインがあって感心するばかりです。 Prettier Accessible Forms Badboy Niceforms Functional Pretty Forms Form Layout Templates Fun with forms - customized input elements Scr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
