PHP inputエリアフォーカス時に枠線と影

bootstrapを使って
class=”col col-sm-2 input-sm form-control-sm form-control”
指定をすると枠線影が自動的に生成される

ところがtableでtd内で複数のinputに「form-control」を指定すると改行されてしまう

そこで
class=”form-control-sm” style=”width:90px; font-size:12px; !important;”とform-control-smを
記入し、枠幅とフォントサイズを指定する
ちなみに
<input style=”width:90px; !important;”
<input class=”form-control-sm” style=”width:90px; font-size:12px;
<input class=”form-control-sm” style=”width:90px; font-size:12px;
と指定すると

枠サイズがでこぼこで色がつかない

そこで

CSSに色と影を追加、focus時にinput　select　texztarea　で指定
form-control-smを指定したくないときは
/*～*/の間をCSSに記入

input[type="text"]:focus {
  outline: solid 1px lightskyblue;
   box-shadow: 0 0 8px lightskyblue;
}

select:focus {
  outline: solid 1px lightskyblue;
  box-shadow: 0 0 8px lightskyblue;
}
textarea:focus {
  outline: solid 1px lightskyblue;
  box-shadow: 0 0 8px lightskyblue;
}
/*
input[type="text"] {
  width: 100%;
  margin: 0;
  height: 2rem;
  box-sizing: border-box;
}
*/

これでめでたく正解　CSSは奥が深い。。。