想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
::placeholderを使ったプレースホルダーの位置調整と、iPhoneとかだけ位置を個別調整した話 - わたしと納豆ごはん
ブログやサイトによくある検索ボックス。はてなブログにもありますよね。 この検索ボックスに前もって灰色の文字が書き込まれています。はてなブログでは「記事を検索」と書かれているものです。 これ、プレースホルダー（ placeholder ）と言うのですが このプレースホルダーが、iPhoneとかブラウザとかでちょっと位置がズレているように感じることってありませんか？ これの位置をちょっと調整したので、その方法のご紹介です。 スポンサーリンク かなり細かい調整なので、必要ないかもしれませんけどね（笑） ちなみにプレースホルダーについては、こちらの記事が非常に参考になります。 myakura.github.io プレースホルダーの位置調整プレースホルダーの位置調整については、調べてみますといろいろ出てきます。 参考リンク：placeholderを指定したときにAndroidでテキスト表示位置を中央
input type="file"をオリジナルのデザインに変更 - Qiita
今回やること input type="file"はcssが反映されないため、直接スタイルの変更ができない。。 ださいデフォルトのデザインをカスタマイズして、今回は ↓ のようなデザインを実装してみたいと思います。 未選択時 選択後 html・css html は input要素のtype="file"を非表示で設置し、その代わりとしてオリジナルボタンを設置。 <div id="js-selectFile"> <!-- 非表示にするボタン --> <input id="js-upload" type="file" style="display:none"> <!-- オリジナルボタン --> <button class="original_btn">ファイルを選択</button> <!-- アイコン --> <span class="icon">未選択</span> </div> /* オ
＜input type=”file”＞の話 | Tech Blog | CRESCO Tech Blog
こんにちは、技術研究所の ton です。 今回は、以前ご紹介した社内イベント「クレスコフェア」の出展作品開発時に、びみょーに苦戦した<input type=”file”>について語ります。 HTML5＋JavaScript＋PHPで<input type=”file”>を使ってファイルアップロード機能をつくります。 途中のサンプルコードはそれだけで（たぶん）動くようになっているので、よろしければお試しください。
form-keeper.com
form-keeper.com 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
inputtype="image"にCSSで設定したマウスオーバーは処理できないのでしょうか？ - 現在、こんな感じに設... - Yahoo!知恵袋
input type="image" にCSSで設定したマウスオーバーは処理できないのでしょうか？ 現在、こんな感じに設定しておりますが、一向に透過できません。 ・Htmlファイル <form name="Form" method="post" onsubmit="return chk()" action="/index/login"> <input name="txtPass" type="text" /> <div class="clear_btn" ><input type="image" class="mouseOver" src="/img/botan.gif></div> </form> ・CSSファイル mouseOver:hover img{ filter: alpha(opacity=65); -moz-opacity:0.75; opacity:0.75; } どなたか
inputに背景が勝手につくCSSの解決法
iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。
inputにフォーカスすると消える文字をjQueryで実装する - Rewish
フォーカスすると消える文字（何も入力が無ければ初期値に戻す）を、jQueryだけで実装する方法を紹介します。 実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。 jQuery(function($) { var placeHolder = 'コメントを入力して下さい！'; $('input[type="text"]') .focus(function() { var self = $(this); if (self.val() === placeHolder) { self.val(''); } }) .blur(function() { var self = $(this); if (self.val() === "") { self.val(placeHolder); } }); }); input[typ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
