html - 如何使阴影和边框样式同时应用于 div(内部输入)和作为一个单一元素的输入？

Question

我需要在输入文本字段(它是一个搜索字段)的右上角插入 div 元素，但是样式只应用于搜索字段，就像 div 元素没有插入它里面，也不是它的一部分

     <form class="search_form">

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


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

</form>

如何将阴影和边框作为一个元素应用于 div 和 input？

Answer 1

您的代码缺少结束 div，您不需要将 div 放在输入元素中。

将按钮 div 放在输入元素之后，并将两者都放在 make_elegant_form div 中。设置 position: relative 在父 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;
}

更新:我看到您已经编辑了问题中的代码。如果您只想在整个表单上添加边框和阴影，只需将它们应用到父 div 即可。在这种情况下，.make_elegant_form div(您删除的那个)。您不能设置表单元素的样式。

输入元素可能有边框作为默认样式，但您可以使用以下方法删除它:

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