CSSでデザインされた検索フォームを作成する│.dotown lab
下記の画像のような検索フォームを直ぐに実装できるよう、HTMLとCSSのコードをメモしておきます。 レスポンシブデザインやリキッドデザインのサイトを想定して、横幅が可変するように設計しています。 一応、IETesterでIE7・IE8は確認しましたが、基本的にクロスブラウザを意識していないのでご注意ください。 HTML <form action="/" name="search" method="get"> <dl class="search"> <dt><input type="text" name="search" value="" placeholder="Search" /></dt> <dd><button><span></span></button></dd> </dl> </form> CSS dl.search{ position:relative; background-
input要素に入力した数字を足すJSを簡単に実装してみる
仕事で、JSで計算ってできない？という質問が出てきたので、簡単に「できます！」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。 とりあえずは単純に作ってみた。 単純に入力した値を足してみる まずはinput要素に入力した文字を単純に「+」で足してみようと思います。 ■コードとデモ jQuery(function($){ $('button','.demo1').click(function(){ //左側inputの入力値を取得（numA） var numA = $('input:eq(0)','.demo1').val(); //右側inputの入力値を取得（numB） var numB = $('input:eq(1)','.demo1').val(); //左＋右の値を出力 $('input:eq(2)','.demo1').val(nu
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
CSS Toggle Switch Examples - Call Me Nick
In this tutorial, we look at some CSS toggle switch examples. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality. Get Source View Demo The Reasoning Often times, we find ourselves needing users to check/uncheck a checkbox to signify a yes/no answer to some question or statement. We set up a label, a checkbox input type, and fetch the boo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一覧画面での検索機能で、コントローラでダラダラと ActiveRecord::Relation を検索項目ごとに組み立てるのを避けるには - わからん
