• css3

    formパーツを描く

    2012/09/25

    css3でフォームパーツを描くの巻!

    form2.png

    css3でformのデフォルトスタイルをリセットすることができます。

    例えばこんなフォーム。
     

    Q1.朝ご飯はパン派ですか?


    Q2.彼のこと、どう思いますか?


    Q3.好きな音楽のジャンルは?(複数回答可)


    Q4.好きな泳ぎ方は?

     

    んーーー!面白くない!

    答える気にならない!


    で、css3のこれを使うことで、好きなフォームパーツを描くことができます。

    この一行でフォームパーツのデフォルトのスタイルをリセットします。

    
    -webkit-appearance: none;
    
    



    ※-webkit-対応ブラウザで見てください。(safari/chrome)

    Q1.朝ご飯はパン派ですか?


    Q2.彼のこと、どう思いますか?


    Q3.好きな音楽のジャンルは?(複数回答可)


    Q4.好きな泳ぎ方は?

     

     

    おおお!楽しい\(^0^)/

    なんかごちゃごちゃしすぎましたが、

    このように自由なアイコンを描くことができます。

     

    疑似要素(:before :after)を使って描いたので、

    余分な要素はありません。

     

    css、載せようと思ったんですがが長くなったので、

    ソースはwebインスペクタで!(すみません)

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back