[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;

}

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

[Bootstrap]Bootstrap既存のボタンの色を変える。

おなじみのBootstrap既存のボタンの色違いバージョンを作りたい場合。


変えたい色１つにつき以下のようなCSSを作る。(例:btn-ccolor_g1という名前で)

/*-----------------------------------------------*/

/*カスタムカラーグラデ１（赤グラデ）*/

.btn-ccolor_g1 { 

     /*置換するもの*/

    /*ccolor_g1　　　　　　　　　←CSS名*/

    /*D11217～851818   　　　←ボタングラデ色*/ 

    /*721717 ←フォーカス時の色*/

    /*edc5fb ←disable時の色*/

background-color: #D11217;

　　　　color: white;

border-color: #851818;

background-image: linear-gradient(to bottom, #D11217 0%, #851818 100%);

}

.btn-ccolor_g1:hover,

.btn-ccolor_g1:focus {

  background-color: #721717;

  background-image: none;

  background-position: 0 -15px;

  color:white;

}

.btn-ccolor_g1:active,

.btn-ccolor_g1.active {

  background-color: #721717;

  background-image: none;

  border-color: #721717;

  color:white;

}

.btn-ccolor_g1.disabled,

.btn-ccolor_g1[disabled],

fieldset[disabled] .btn-ccolor_g1,

.btn-ccolor_g1.disabled:hover,

.btn-ccolor_g1[disabled]:hover,

fieldset[disabled] .btn-ccolor_g1:hover,

.btn-ccolor_g1.disabled:focus,

.btn-ccolor_g1[disabled]:focus,

fieldset[disabled] .btn-ccolor_g1:focus,

.btn-ccolor_g1.disabled.focus,

.btn-ccolor_g1[disabled].focus,

fieldset[disabled] .btn-ccolor_g1.focus,

.btn-ccolor_g1.disabled:active,

.btn-ccolor_g1[disabled]:active,

fieldset[disabled] .btn-ccolor_g1:active,

.btn-ccolor_g1.disabled.active,

.btn-ccolor_g1[disabled].active,

fieldset[disabled] .btn-ccolor_g1.active {

    background-color: #edc5fb;

    background-image: none;

    border-color: #edc5fb;

    color:white;

}

/*-----------------------------------------------*/

ポイント…

①基本ボタン色・フォーカスの時の色・disableの時の色３つ用意する。

　基本ボタン色はグラデにする気がないのなら開始色も終わり色も同じ色にすればOk

　フォーカスの時の色は基本ボタン色を濃くしたもの、

　disableの時の色は基本ボタン色をかなり明るくしたもの、を用意する。

②/*置換するもの*/にあるCSS名とデフォの色を
　　①で用意した色に一斉置換でマルっと置き換える。

HTMLでの使い方は以下。btn-defaultに重ねること。

/*-----------------------------------------------*/

class="btn btn-default btn-ccolor_g1"

/*-----------------------------------------------*/