2016年11月29日火曜日

[CSS]必須のマークをCSSでつける(線を引いてみる)

入力フォームで必須の場合に
CSSで指定して"*"マークを後ろにつけるのはちらほら見かけるが、
今回は以下の様に線の色を変えるバージョンをCSSで作ってみる。



HTMLはこんな感じ。[Requied]を指定します。
-----------------------------------------------------------
<td class="Requied" style="background-color:Gray;">部数</td>
------------------------------------------------------------

[Requied]は以下の様に指定すればOK。
-----------------------------------------------------------

td.Requied::before {
    content: "";
    position: absolute;
    height: 36px;
    box-shadow: 0px 0px 0px 1px red;
    -webkit-box-shadow: 0px 0px 0px 1px red;
    -moz-box-shadow: 0px 0px 0px 1px red;
    -o-box-shadow: 0px 0px 0px 1px red;
    margin-left: -5px;
    margin-top: -6px;
    margin-bottom: -8px;
    margin-right: 6px;

}

------------------------------------------------------------

0 件のコメント:

コメントを投稿