Question

入力テキストフィールドの右隅にdiv要素を挿入する必要があります（検索フィールド）。div要素がその内部に挿入されていないので、スタイルは検索フィールドにのみ適用されます。

 <form class="search_form"> 

        <input type="text" value="Введіть назву події" > 


        <div type='button' class="city_select"> 
        </div> 
         </input> 

</form> 

影と罫線が1つの要素としてdivとinputの両方に適用されるようにするにはどうすればよいですか？

Answer 1

あなたのコードには閉じたdivがありません。divを入力要素の中に置く必要はありません。

input要素の後ろにdivを配置し、make_elegant_form divの内側にdivを配置します。親make_elegant_form divとボタンdivの両方で相対位置を設定します。次に、左のボタンdivの位置を決めるために負の数を使用します。 （私の頭の上から）このような何か：

HTML：

<form class="search_form"> 
    <div class="make_elegant_form"> 
     <input type="text" value="Введіть назву події" ></input> 
     <div type='button' class="city_select"></div 
    </div> 
</form> 

CSS：

.make_elegant_form { 
    position: relative; 
} 

.city_select { 
    display: inline; 
    position: relative; 
    left: -30px; 
} 

UPDATE：私はあなたがあなたの質問にコードを編集している参照してください。あなたが望むのはフォーム全体に境界線と影を付けることだけであれば、それらを親divに適用するだけです。この場合、.make_elegant_form div（あなたが削除したもの）。フォーム要素をスタイルすることはできません。

入力要素は、既定のスタイルとして境界線を持っているかもしれないが、あなたがこれを削除することができます

.search_form input { 
    border: none; 
    outline: none; 
}