Вам нужна функция для выполнения конкатенации.
Microsoft Access конденсирует несколько строк в таблице
Пример использования ваших данных:
Select T.ColumnA
, GetList("Select ColumnB From Table1 As T1 Where T1.ColumnA = " & [T].[ColumnA],"",", ") AS ColumnBItems
From Table1 AS T
Group By T.ColumnA;
Можно просто использовать appearance: none
на современных браузерах, так, чтобы не было никакого моделирования по умолчанию, и все стили применяются правильно:
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 2em;
height: 2em;
border: 1px solid gray;
outline: none;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: blue;
}
**Custom checkbox with css** (WebKit browser solution only Chrome, Safari, Mobile browsers)
<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>
/* The checkbox-cu */
.checkbox-cu {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 0;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox-cu */
.checkbox-cu input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox-cu */
.checkmark {
position: absolute;
top: 4px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border: 1px solid #999;
border-radius: 0;
box-shadow: none;
}
/* On mouse-over, add a grey background color */
.checkbox-cu:hover input~.checkmark {
background-color: #ccc;
}
/* When the checkbox-cu is checked, add a blue background */
.checkbox-cu input:checked~.checkmark {
background-color: transparent;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-cu input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-cu .checkmark::after {
left: 7px;
top: 3px;
width: 6px;
height: 9px;
border: solid #28a745;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 100;
}
Поздно стороне, но так или иначе это все еще трудно в 2019, таким образом, я добавил свои три решения, которые необходимо найти полезным, JavaScript свободная, внешняя библиотека свободный*, и доступный...
, я прокручивал и прокручивал, и тонны этих ответов просто бросают доступность снаружи, и нарушают WCAG больше чем одним способом.
мне было нужно решение, которое не нарушает WCAG, не полагается на JavaScript или внешние библиотеки, и это не повреждает переключение вкладок или клавишу "Пробел" для выбора, который позволяет события фокуса, решение, которое допускает отключенные флажки, которые и проверяются и неконтролируемы, и наконец решение, где я могу настроить вид флажка однако, я хочу с различным background-color
, border-radius
, и т.д.
Вот скрипка моего решения для флажка, где я использовал некоторую комбинацию этот ответ от @Jan TuroЕ€ для предложения моего собственного решения, которое, кажется, работает вполне хорошо. Если Вы уже используете FontAwesome или Glyphicons или некоторую другую проверку библиотеки значка эта скрипка , я имею также сделанный скрипка переключателя , который использует много того же кода от флажков для создания этой работы с переключателями также.
я добавил много комментариев для тех non-CSS'y людей:
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
/* Text color for the label */
input[type="checkbox"]+span {
cursor: pointer;
font: 16px sans-serif;
color: black;
}
/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
content: '';
border: 1px solid grey;
border-radius: 3px;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 0.5em;
margin-top: 0.5em;
vertical-align: -2px;
}
/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
/* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
background-repeat: no-repeat;
background-position: center;
/* The size of the checkmark icon, you may/may not need this */
background-size: 25px;
border-radius: 2px;
background-color: #e7ffba;
color: white;
}
/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
/* Visible in the full-color space */
box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);
/* Visible in Windows high-contrast themes
box-shadow will be hidden in these modes and
transparency will not be hidden in high-contrast
thus box-shadow will not show but the outline will
providing accessibility */
outline-color: transparent; /*switch to transparent*/
outline-width: 2px;
outline-style: dotted;
}
/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
cursor: default;
color: black;
opacity: 0.5;
}
/* Styles specific to this fiddle that you do not need */
body {
padding: 1em;
}
h1 {
font-size: 18px;
}
<h1>
NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>
<label>
<input type="checkbox">
<span>Try using tab and space</span>
</label>
<br>
<label>
<input type="checkbox" checked disabled>
<span>Disabled Checked Checkbox</span>
</label>
<br>
<label>
<input type="checkbox" disabled>
<span>Disabled Checkbox</span>
</label>
<br>
<label>
<input type="checkbox">
<span>Normal Checkbox</span>
</label>
<br>
<label>
<input type="checkbox">
<span>Another Normal Checkbox</span>
</label>