Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Кастомные checkbox в ячеках таблици (https://javascript.ru/forum/xhtml-html-css/72003-kastomnye-checkbox-v-yachekakh-tablici.html)

Black_Star 28.12.2017 12:58
Кастомные checkbox в ячеках таблици
 
Добрый день уважаемые. Подскажите пожалуйста как правильно прописать путь для псевдокласов что б была реакциая на :checked Вот пример 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.bl_filters__lable {
		position: relative;
		display: block;
		min-height: 36px;
		width: 100%;
	}

	.bl_filters__input {
		position: absolute;
		left: 0;
		visibility: hidden;
		opacity: 0;
	}

	.filter_text {
		margin-left: 25px;
		font-weight: 400;
		position: relative;
		display: block;
		width: 100%;
		color: #000;
		cursor: pointer;
	}

	.filter_text:hover,
	.filter_text:focus {
		color: #00f;
	}

	.filter_text span {
		font-weight: bold;
	}

	.decor_lickCheckbox:before {
		position: absolute;
		left: -24px;
		top: 4px;
		content: "";
		width: 13px;
		height: 13px;
		border: 1px solid #1e232c;
		box-sizing: border-box;
		border-radius: 50%;
		z-index: 2;
	}

	.bl_filters__input:checked + td > .filter_text {
		font-weight: bold;
		color: #00f;
	}

	.bl_filters__lable .bl_filters__input:checked + td > .decor_lickCheckbox:before {
		border: 1px solid #00f;
		background-color: #00f;
	}

</style>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<td>
					<input id="manufacturer_48" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="48">
				</td>
				<td>
					<label class="filter_text decor_lickCheckbox" for="manufacturer_48">KAIDA (12)</label>
				</td>
			</tr>
			<tr>
				<td>
					<input id="manufacturer_9" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="9">
				</td>
				<td>
					<label class="filter_text decor_lickCheckbox" for="manufacturer_9">Lucky John (22)</label>
				</td>
			</tr>
			<tr>
				<td>
					<input id="manufacturer_36" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="36">
				</td>
				<td>
					<label class="filter_text decor_lickCheckbox" for="manufacturer_36">Okuma (1)</label>
				</td>
			</tr>
			<tr>
				<td>
					<input id="manufacturer_23" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="23">
				</td>
				<td>
					<label class="filter_text decor_lickCheckbox" for="manufacturer_23">Winner (4)</label>
				</td>
			</tr>
			<tr>
				<td>
					<input id="manufacturer_10" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="10">
				</td>
				<td>
					<label class="filter_text decor_lickCheckbox" for="manufacturer_10">Salmo (463)</label>
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>


Собстевенно проблема в последних двух стилях.
.bl_filters__input:checked + td > .filter_text
.bl_filters__lable .bl_filters__input:checked + td > .decor_lickCheckbox:before
Я понимаю что задаю их не правильно, как это исправить ?
При активации checkbox должен миняться цвет надписи и свет псевдокласса.

рони 28.12.2017 13:10
Цитата:
Сообщение от Black_Star
Подскажите пожалуйста как правильно прописать путь для псевдокласов что б была реакциая на :checked
никак, нужен скрипт

Black_Star 28.12.2017 14:14
Цитата:
Сообщение от рони (Сообщение 473926)
никак, нужен скрипт
Что совсем-совсем ? Я просто пробовал и через ~ пропихнуть и классы добавлял, пока ничего не получилось :cray: . К сожалению, я не могу переписать HTML элементы, поскольку это часть живого фильтра и если я что-то потяну, оно потом всё поламается.

рони 28.12.2017 14:32
Black_Star,
не изобрели ещё таких селекторов

ksa 28.12.2017 14:36
Цитата:
Сообщение от Black_Star
Что совсем-совсем ?
В ЦСС нет "возврата из родителя"... :no:
У тебя чеки в одной ячейке, а лабели в другой.

Сделай их "соседними". ;)

<style type='text/css'>
input + label:after {
	content: '';
	display: block;
}
input:checked + label {
	color: red;
}
</style>
<input id="manufacturer_23" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="23">
<label class="filter_text decor_lickCheckbox" for="manufacturer_23">Winner (4)</label>
<input id="manufacturer_10" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="10">
<label class="filter_text decor_lickCheckbox" for="manufacturer_10">Salmo (463)</label>

рони 28.12.2017 14:45
Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .bl_filters__lable {
    position: relative;
    display: block;
    min-height: 36px;
    width: 100%;
  }

  .bl_filters__input {
    position: absolute;
    left: 0;
    visibility: hidden;
    opacity: 0;
  }

  .filter_text {
    margin-left: 25px;
    font-weight: 400;
    position: relative;
    display: block;
    width: 100%;
    color: #000;
    cursor: pointer;
  }

  .filter_text:hover,
  .filter_text:focus {
    color: #00f;
  }

  .filter_text span {
    font-weight: bold;
  }

  .decor_lickCheckbox:before {
    position: absolute;
    left: -24px;
    top: 4px;
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid #1e232c;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: 2;
  }

  td.checked + td > .filter_text {
    font-weight: bold;
    color: #00f;
  }

  td.checked + td > .decor_lickCheckbox:before {
    border: 1px solid #00f;
    background-color: #00f;
  }

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('.manufacturer_value'), function(item) {
          item.addEventListener('change', function() {
              item.checked ? item.parentNode.classList.add("checked"):
              item.parentNode.classList.remove("checked")
          });
      });
  });
</script>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>
          <input id="manufacturer_48" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="48">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_48">KAIDA (12)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_9" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="9">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_9">Lucky John (22)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_36" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="36">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_36">Okuma (1)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_23" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="23">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_23">Winner (4)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_10" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="10">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_10">Salmo (463)</label>
        </td>
      </tr>
    </tbody>
  </table>

</body>
</html>


Часовой пояс GMT +3, время: 18:46.