ワードプレスのカスタムCSSコード

Question

誰かが多分CSSコードのいくつかの行で私を助けることができますか？

私は自分のページ上の私の検索部に希望：私はCSSに新しいとWordpressの おかげで、Davor

だ https://docs.wedevs.com/

：このような何かを検索するには

http://www.virtual-forms.com/docs/

編集： 私の最近の試行はこれでした：

/*Header search weDocs*/ 
.wedocs input[type="submit"], 
.wedocs input[type="search"] 
{ 
    background-color: #fff !important; 
    color: #000; 
    width: 50%; 
} 

運がない。

Answer 1

正しいCSSを適用するには、Webブラウザの要素を調べて（サイトの要素> Inspectを右クリックして）正しいクラスを見つけてください。リンクされたサイトvirtual-forms.comを調べると、検索フォーム全体にclass = "search-form wedocs-search-form"という親フォーム要素があり、入力用に "wedocs-search-input"ドロップダウンの場合は「-search-in」、サブミットボタンの場合は「search-submit」です。

私はディスプレイを置くでしょう：フレックス;親要素：これらのクラスを使用してそこ

.wedocs-search-input { } 
.wedocs-search-in { } 
.search-submit { } 

を個々の要素のスタイルを

.wedocs-search-form { 
    display: flex; 
} 

使用クラスは、それらの要素への正しいスタイルを得るためにあなたが近づくはずです。フレックスボックスでここをクリックしてください：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

私はflex-growを入力に使用して、例えばそれを大きくします。これがあなたを連れてくれることを願って。