今回はcssというかonsenuiの話題です。(onsenuiとはcssのフレームワークです。)
今回はいつもと違う枠入りのinputfileをousenuiを使って作ってみました。
jsfiddleでreactとかのフレームワークに依存しない形で作ったのでシンプルかつそのまま使えます。
#mypage ons-input {
font: 0px/32px sans-serif;
box-sizing: border-box;
width: 100%;
margin-top: 30px;
padding: 0px 2px 2px;
border: 1px solid #aaaaaa;
background-color: #fff;
border-radius: 4px;
outline: none;}
#mypage ons-input .text-input {
background-image: linear-gradient(#fff,#fff),linear-gradient(0deg,transparent 1px,#fff 0) !important; }
枠の色合い太さはborder。外枠の太さを決めるのにはoutline。角張を設定するのにはborder-radius。
他のinputfileとレイアウトを統一していて、ある特定のページのinputfileのみ
レイアウトを変えたい場合は.text-inputと設定します。
この.text-inputは、onsenuiにおけるデフォルトの状態を意味しています。
他のinputfileでフォーカスとアニメーションを設定しているので、ここだけ少し違う振る舞い
を持たせたいと思い使いました。
これと異なるレイアウトをlinear-gradientを使って背景色の白と同化させて完全に見えなくしています。
最後に!important(同じinputfileの装飾を指定しているcssがある場合、これをつけているcssが優先になる)
をつけるのも忘れずに。
