时间戳

首页 > 解决方案 > 如何将不同的css样式应用于同一页面上的两个不同的表单元素？

html - 如何将不同的css样式应用于同一页面上的两个不同的表单元素？

问题描述

我正在尝试创建一个带有搜索栏的网页，该搜索栏在顶部具有自己的样式，然后在页面中稍后使用 django 和脆的表单创建一个表单。目前，我的搜索栏的样式适用于我的表单的样式，我不希望这样。我想使用 bootstrap 清晰的表单来设置表单的样式，并使用我自己的自定义 css 来设置搜索栏的样式。（搜索栏被编码为带有输入的表单。）

我尝试重新排序我的 html 头部中的链接，首先是引导程序，其次是搜索栏，反之亦然，它没有影响任何事情，而不是搞砸了我的搜索栏的位置。我曾尝试用单独的 id 和单独的类将这两种形式包装在 div 中，但它也不起作用。我尝试为我的自定义搜索栏表单提供一个 ID。我知道 CSS 的特殊性。

我不知道如何做到这一点，以便我可以将两者完全分开。帮助表示赞赏。

相关的html：

<head>
        ...
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/css/search_bar.css' %}" />
    <noscript><link rel="stylesheet" href="{% static 'assets/css/noscript.css' %}" /></noscript>    
</head>
<body>
    ...
    <div class="searchbar">
        <form action="">
            <input type="search">
            <i class="fa fa-search"></i>
        </form>
    </div>
    ...
    <div class="spotlight">
        <form action ="" method="POST">
            <div class="form-group">
                {% csrf_token %}
                {% crispy form %}
            </div>
        </form>
    </div>
    ...
</body>

而我试图仅应用于搜索栏的自定义 css 文件：

.searchbar form {
    position: relative;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%,-50%);
    transition: all 1s !important;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}
.searchbar input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
}
.searchbar .fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

.searchbar form:hover{
    width: 300px;
    cursor: pointer;
}

.searchbar form:hover input{
    display: block;
    color: black;
}

.searchbar form:hover .fa{
    background: pink;
    color: white;
}

编辑：这就是我希望最终 UI 的样子：https ://i.imgur.com/82g36KY.png

标签： htmlcssdjangobootstrap-4frontend

解决方案

推荐阅读