CSS

input type="radio" のラベル、チェックされてる時のスタイル属性

CSS

メモ input[type=radio]:checked + label{ background-color: #ff00ff; color: #ffffff; } のように書く。

Wicket ModalWindow full screen

Wicket ModalWindow full screen と言うと、ちょっと言い過ぎだけど、つまりブラウザで開いたページ表示一杯の 幅、高さで ModalWindow しかも caption なしの ModalWindow に見えない ModalWindow を出したくなった。昔、captionが無い~フレーム枠が存在し…

jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定

jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…

css だけでドロップメニュー(横)

CSS

水平方向に並べたメニューのドロップを書いたので、 oboe2uran.hatenablog.comでは、縦にならべたメニューの横に表示するメニューサンプル <ul class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><span>menu</span> <ul> <li></li></ul></li></ul>

css だけでドロップメニュー

CSS

html サンプル <ul class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><span>menu</span> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub…</a></li></ul></li></ul>

css float属性の解除は、after疑似要素で。

CSS

今更。。。 css float属性の解除は、after疑似要素を使うのがいい。 <ul class="foo"> <li>a</li> <li>b</li> <li>c</li> </ul> <ul> <li>d</li> <li>e</li> <li>f</li> </ul> に対して、 .foo:after{ content: ""; display: block; clear: both; } .foo li{ float: left; list-style: none; width: 50px; border: 1px solid #808080; }

JavaFX CSS で @CHARSET記述は不要である

JavaFX の CSS を書いていると、ついHTMLのCSS を書いていた時の癖で @CHARSET "UTF-8"; を書いてしまう。でも、これを書いてしまうと、com.sun.javafx.css.parser.CSSParser は、CSS parseエラーになり思いとおりの スタイルが適用されなくなる。doc…

cssで書くメニューの例。。

メモ。。。 今さらだけど、以下で紹介された方法も使おう。 JSを使わずにCSSだけで作るドロワーメニュー – Web制作会社トライム

input タグ type="number" のスピンボタンを非表示

CSS

input タグ type="number" のスピンボタンを非表示にするCSSChrome と Safari input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } IE input[type="number"]{ -…

textarea 横スクロール

CSS

HTML textarea の wrap 属性って気が付けば wrap="off" は、もう使用しないんですね。横スクロールが自動で出るように wrap="off" を使うのではなく、 wrap="soft" と指定する。 もしくはCSSで、 textarea{ resize: none; white-space: pre; overflow-wra…

横長カレンダーを書く

横長カレンダーを書く jQuery ソース・・・メモ。 moment.js http://momentjs.com/ を使うことにした。jQuery は、2.x系で書いた。moment-with-locales.js を使う。 /* datetext = yyyy/MM/dd 日付 * predays = 前方日数(datetextの日付を含まないカウント)…

カスタムデータ属性で CSSを効かせる

CSS

HTML5 のカスタムデータ属性で CSSを効かせる方法、例) td タグに、data-date="2016/09/04" にある場合、 td[data-date="2016/09/04"]{ background-color: #ffc0cb !important; } のように書く。data 属性の値はプログラムで動的に付与していくケースが…

label の CSS でチェックされてる時の指定

CSS

チェックされた radio ボタンに対する label の CSS の書き方を忘れてしまいそうなのでメモ。 input[type="radio"]:checked+label{ background-color: #afeeee; }

fontello の利用でアイコンフォントを追加する時、

CSS

アイコンフォントを導入するのに便利な、http://fontello.com/ を利用した時、さらに使用するアイコンを追加する時、 どうしたら良いか?最初にダウンロードした中に、config.json というファイルが含まれているはずなので、これをサイトにもう一度アップロ…

プログレスバー、画像を使わずに。

画像を使わないでCSSで描画させるプログレスバーを探したらありました。red-team-design.comこれを jQuery の $.ajax で通信した時に、進捗率を表示させます。これに、バーの中央に(%)進捗率を表示させたいので、以下のようにHTMLを書いて、 <div id="preogress_bar" class="progress-bar stripes"> <span style="width: 0%"></span><p>0 %</p> </div> 次…

CSS の nth-child

CSS

CSS の nth-child の書き方、解ってるんだけど、ちょっとパターンが複雑になると 迷うことがあるのでメモ td:nth-child(odd){ background-color: #ffffcc; } 奇数 1 2 3 4 5 6 7 8 9 10 11 td:nth-child(even){ background-color: #ffffcc; } 偶数 1 2 3 4 5…

nth-of-type を使いこなそう。

CSS

HTML表の表現で以下のように、3*n 段の内2段目だけ上下の罫線を変えたい。 真っ先に浮かんだ nth-child では、苦しい。 悩んでいろいろ調べたら、nth-of-type を使えばいい。 table.score{ box-sizing: border-box; border-collapse: collapse; border-spac…

セルをはみ出た時だけ、Tooltip

table セルをはみ出た時だけ、Tooltip表示する。というのをするのに、サーバサイドでHTML生成では条件分岐したくなくて、少し悩んだあげく 結局、jQuery に頼るしかなかった。 CSSを以下のように用意。 td { border: 1px solid #000000; padding: 4px 10px; …