Блог

Главная - Вопросы по программированию - Как разместить метку перед полем ввода с помощью css?

Как разместить метку перед полем ввода с помощью css?

#css #wordpress

#css #wordpress

Вопрос:

У меня есть этот 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 for="search_keywords">Keywords</label>
<input type="text" name="search_keywords" 
id="search_keywords" placeholder="Keywords" value="" 
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location" 
id="search_location" placeholder="Location" value="" />
</div>

Я хочу разместить метку Where? до location и What? перед keywords использованием css.

Пробовал:

 label[What?]:before {
  content: "search_location";
  color: green; 
}

Не сработало.

На данный момент метка location , указанная в моем html, отображается как заполнитель, а не как метка — аналогично для метки search keywords , это нормально, но я бы хотел, чтобы эти заполнители заменялись на, для location London, Berlin, Bristol... и для search keywords Chef, Cleaner, Manager...

Возможно, будет понятнее, если вы посмотрите на: https://adsler.co.uk/jobs /

Комментарии:

1. Это немного шире. Можете ли вы изменить HTML? Если да, то просто введите «Что?» и «Где?» в соответствующих местах. В противном случае, вы пробовали label[for='search_keywords']::before использовать селектор?

2. Да, пробовал. Невозможно редактировать html, так как это плагин wp, написанный на php, html, javascript

3. пожалуйста, попробуйте что-нибудь, чтобы проверить проблему, просто label::before{content:»что»;}, Чтобы увидеть, работает ли это на всех ярлыках

4. На вашем живом сайте ярлыки не отображаются, потому что они есть display: none в frontend.css. Поэтому сначала сделайте их видимыми. Или, забудьте о метках и вместо этого добавьте ::before в разделы контейнера (.search_keywords и .search_location ).

Ответ №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>

Комментарии:

1. Слишком сложно. Это плагин Wp, написанный на php, html, javascript

2. Попробовал это. Ничего.

Ответ №2:

Основываясь на предоставленном вами фрагменте HTML, ваш CSS-селектор label[What?]:before ни к чему не приведет. Квадратные скобки [] используются для выбора элементов на основе одного из их атрибутов (см. Определение селектора атрибутов). Похоже, вы пытаетесь передать желаемое значение (которое еще не существует) в качестве селектора атрибутов, что невозможно.

Глядя на сайт, другая проблема, с которой вы столкнулись, заключается в том, что сами ярлыки были скрыты. В настоящее время это находится в вашем CSS, поэтому его необходимо изменить или иным образом переопределить:

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

Тогда, как уже предлагал мистер Листер, что-то вроде этого поможет вам на правильном пути. Я протестировал в браузере на вашем сайте, и он работает, как только ярлыки не скрыты:

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

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

Я собираюсь предположить, что ваше фактическое намерение состоит в отображении меток, но вы хотите изменить их существующие значения из «Ключевых слов» и «Местоположения», используя только CSS? Это невозможно. Вы могли бы использовать немного JavaScript для изменения текстового содержимого, но не с помощью CSS в вашей текущей реализации.

Метки: