投稿フォームのボタンの中にCSSの形を入れてください

Question

私はCSSフォームをボタンの中に入れたいと思っていました。私は何とかCSSの中身を入れようとしたので私は失敗しました<input type="submit">しかし、 htmlタグ<button>代わりに...これは私のソリューションであり、あなたの検索ボタンに素敵な純粋なCSS検索アイコンを置きます。それは

#search-icon { 
 
    font-size: 4em; 
 
    display: inline-block; 
 
    width: 0.4em; 
 
    height: 0.4em; 
 
    border: 0.1em solid #B10B14; 
 
    position: relative; 
 
    border-radius: 0.35em; 
 
} 
 
#search-icon::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: -0.25em; 
 
    bottom: -0.1em; 
 
    border-width: 0; 
 
    background: #B10B14; 
 
    width: 0.35em; 
 
    height: 0.08em; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
}

<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>"> 
 
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="search-field" /> 
 
    <button type="submit" id="search-icon-container"> 
 
    <div id="search-icon"></div> 
 
    </button> 
 
</form>

Answer 1

のに少し調整が必要になる場合があります、あなたはまた、素晴らしいフォントを使用することが考えたことがありますか？ uは、このためのdivを使用したいのはなぜ

https://stackoverflow.com/tags/font-awesome/info

button i { 
 
    color:red;/*set the color */ 
 
    font-size:2em;./* set the size */ 
 
    } 
 
/* even add some text decoration */ 
 
i:before { 
 
    text-shadow:1px 1px 1px black; 
 
    }

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<button type="submit"><i class="fa fa-search"></i></button>