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放在input元素中。

将input div放在input元素之后，并将两者放在make_elegant_form div中。在父make_elegant_form div和按钮div上设置position：relative。然后使用负数将按钮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（您删除的那个）。您无法设置表单元素的样式。

input元素可能有一个边框作为默认样式，但您可以使用以下方法删除它：

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

如何将阴影和边框样式应用于div（内部输入）和输入作为单个元素？

1 个答案: