Question

我有这个html：

Where?

我想使用CSS将标签location放在What?之前，将keywords放在label[What?]:before { content: "search_location"; color: green; }之前。

尝试：

location

没用。

目前，在我的html中列出的标签search keywords显示为占位符，而不是标签-标签location也是这样，这很好，但我希望将这些占位符替换为{ {1}} London, Berlin, Bristol...和search keywords Chef, Cleaner, Manager...

如果您查看以下位置，可能会更清楚：https://adsler.co.uk/jobs/

Answer 1

您不能只将标签放在html上吗？像这样

    <div class="entry-content">
    <div class="job_listings" data-location="" data-
    keywords="" data-show_filters="true" data-
    show_pagination="false" data-per_page="10" data-
    orderby="featured" data-order="DESC" data-categories=""
    >
    <form class="job_filters">
    <div class="search_jobs">
    <div class="search_keywords">
    <label style="color: green;">What?</label>
    <label for="search_keywords">Keywords</label>
    <input type="text" name="search_keywords"
    id="search_keywords" placeholder="Keywords" value=""
    />
    </div>
    <div class="search_location">
    <label style="color: green;">Where?</label>
    <label for="search_location">Location</label>
    <input type="text" name="search_location"
    id="search_location" placeholder="Location" value="" />
    </div>

Answer 2

根据您提供的HTML代码段，您的CSS选择器label[What?]:before不会解析为任何内容。方括号[]用于根据其属性之一选择元素（请参见attribute selector definition）。您似乎正在尝试传递所需的值（尚不存在）作为属性选择器，这是不可能的。

在站点上，您遇到的另一个麻烦是标签本身已被隐藏。当前在CSS中，因此需要进行更改或以其他方式覆盖：

.job_filters .search_jobs div label {
  display: none;
}

然后，如Lister先生所建议的那样，类似的操作将使您步入正轨。我已经在您网站上的浏览器中进行了测试，并且一旦隐藏标签，它就可以正常工作：

label[for="search_location"]:before {
  content: "Where?";
}

label[for="search_keywords"]:before {
  content: "What?";
}

我要假设您的实际意图是显示标签，但是您想仅使用CSS从“关键字”和“位置”更改其现有值？这是无法实现的。您可以使用一些JavaScript来更改文本内容，但在当前的实现中不能使用CSS。

如何使用CSS在输入框前放置标签？

2 个答案: