可访问的css切换

时间：2017-08-21 09:00:23

标签： html css accessibility

我有这个Css Toggle按预期工作，我想将焦点轮廓添加到所有toggles for accessiiblity

如何在标签时为这些切换添加标签焦点大纲？

.container {
  margin: 10px;
}

input.switch:empty {
  margin-left: -999px;
}

input.switch:empty~label {
  position: relative;
  float: left;
  line-height: 1.6em;
  text-indent: 4em;
  margin: 0.2em 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 3.6em;
  background-color: #ccc;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  border-radius: 1em;
}

input.switch:empty~label:after {
  width: 1.4em;
  top: 0.1em;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 1px 1px 0 rgb(12, 12, 12), 1px 1px 5px black;
}

input.switch:checked~label:before {
  background-color: #aaf;
}

input.switch:checked~label:after {
  margin-left: 2em;
}

label:focus {
  border: 1px solid #000;
}
<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch1" name="switch1" class="switch" />
    <label for="switch1">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch2" name="switch2" class="switch" />
    <label for="switch2">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch3" name="switch3" class="switch" />
    <label for="switch3">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch4" name="switch4" class="switch" />
    <label for="switch4">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch5" name="switch5" class="switch" />
    <label for="switch5">Toggle</label>
  </div>
</div>

4 个答案:

答案 0 :(得分：1)

我认为这对你有用 -

第一个解决方案

我用过

.switch:empty:focus~label:before {
  border: 1px solid red;
}

＆＃13;
＆＃13; 
.container {
  margin: 10px;
}

input.switch:empty {
  margin-left: -999px;
}

input.switch:empty~label {
  position: relative;
  float: left;
  line-height: 1.6em;
  text-indent: 4em;
  margin: 0.2em 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 3.6em;
  background-color: #ccc;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  border-radius: 1em;
}

input.switch:empty~label:after {
  width: 1.4em;
  top: 0.1em;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 1px 1px 0 rgb(12, 12, 12), 1px 1px 5px black;
}

input.switch:checked~label:before {
  background-color: #aaf;
}

input.switch:checked~label:after {
  margin-left: 2em;
}

input.switch:empty:focus~label:before {
  border: 1px solid red;
}
＆＃13; 
<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch1" name="switch1" class="switch" />
    <label for="switch1">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch2" name="switch2" class="switch" />
    <label for="switch2">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch3" name="switch3" class="switch" />
    <label for="switch3">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch4" name="switch4" class="switch" />
    <label for="switch4">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch5" name="switch5" class="switch" />
    <label for="switch5">Toggle</label>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

第二个解决方案

但在这里我使用了: active。

＆＃13;
＆＃13; 
.container{
    margin: 10px;
}

input.switch:empty{
        margin-left: -999px;
    }

    input.switch:empty ~ label
    {
    	position: relative;
    	float: left;
    	line-height: 1.6em;
    	text-indent: 4em;
    	margin: 0.2em 0;
    	cursor: pointer;
    	-webkit-user-select: none;
    	 -moz-user-select: none;
    	 -ms-user-select: none;
    	 user-select: none;
    }

    input.switch:empty ~ label:before,
    input.switch:empty ~ label:after
    {
    	position: absolute;
    	display: block;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	content: ' ';
    	width: 3.6em;
    	background-color: #ccc;
    	-webkit-transition: all 100ms ease-in;
    	transition: all 100ms ease-in;
        border-radius: 1em;
    }

    input.switch:empty ~ label:after
    {
    	width: 1.4em;
    	top: 0.1em;
    	bottom: 0.1em;
    	margin-left: 0.1em;
    	background-color: #fff;
    	border-radius: 1em;
        box-shadow: 1px 1px 0 rgb(12, 12, 12), 1px 1px 5px black;
    }

    input.switch:checked ~ label:before
    {
    	background-color: #aaf;
    }

    input.switch:checked ~ label:after
    {
        margin-left: 2em;
    }
    label:active:before{
        border:1px solid #000;
    }
＆＃13; 
<div class="container">
	<div class="custom-toggle">
		<input type="checkbox" id="switch1" name="switch1" class="switch" />
		<label for="switch1">Toggle</label>
	</div>
</div>

<div class="container">
	<div class="custom-toggle">
		<input type="checkbox" id="switch2" name="switch2" class="switch" />
		<label for="switch2">Toggle</label>
	</div>
</div>

<div class="container">
	<div class="custom-toggle">
		<input type="checkbox" id="switch3" name="switch3" class="switch" />
		<label for="switch3">Toggle</label>
	</div>
</div>

<div class="container">
	<div class="custom-toggle">
		<input type="checkbox" id="switch4" name="switch4" class="switch" />
		<label for="switch4">Toggle</label>
	</div>
</div>

<div class="container">
	<div class="custom-toggle">
		<input type="checkbox" id="switch5" name="switch5" class="switch" />
		<label for="switch5">Toggle</label>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

检查这是否是您所需要的。希望这对您有帮助。

答案 1 :(得分：1)

在input:focus上添加大纲到label，或者如果要使用border-radius

，可以添加边框 
input.switch:empty:focus~label{
  outline:1px solid red;
}

＆＃13;
＆＃13; 
.container {
  margin: 10px;
}

input.switch:empty {
  margin-left: -999px;
}
input.switch:empty:focus~label{
  outline:1px solid red;
}
input.switch:empty~label {
  position: relative;
  float: left;
  line-height: 1.6em;
  text-indent: 4em;
  margin: 0.2em 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 3.6em;
  background-color: #ccc;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  border-radius: 1em;
}

input.switch:empty~label:after {
  width: 1.4em;
  top: 0.1em;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 1px 1px 0 rgb(12, 12, 12), 1px 1px 5px black;
}

input.switch:checked~label:before {
  background-color: #aaf;
}

input.switch:checked~label:after {
  margin-left: 2em;
}

label:focus {
  border: 1px solid #000;
}
＆＃13; 
<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch1" name="switch1" class="switch" />
    <label for="switch1">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch2" name="switch2" class="switch" />
    <label for="switch2">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch3" name="switch3" class="switch" />
    <label for="switch3">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch4" name="switch4" class="switch" />
    <label for="switch4">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch5" name="switch5" class="switch" />
    <label for="switch5">Toggle</label>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

添加此css：

 input.switch:focus:empty ~ label::before {
  outline: 1px solid #000;
}

＆＃13;
＆＃13; 
input.switch:focus:empty ~ label::before {
  outline: 1px solid #000;
}

.container {
  margin: 10px;
}

input.switch:empty {
  margin-left: -999px;
}

input.switch:empty~label {
  position: relative;
  float: left;
  line-height: 1.6em;
  text-indent: 4em;
  margin: 0.2em 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 3.6em;
  background-color: #ccc;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  border-radius: 1em;
}

input.switch:empty~label:after {
  width: 1.4em;
  top: 0.1em;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 1px 1px 0 rgb(12, 12, 12), 1px 1px 5px black;
}

input.switch:checked~label:before {
  background-color: #aaf;
}

input.switch:checked~label:after {
  margin-left: 2em;
}

label:focus {
  border: 1px solid #000;
}
＆＃13; 
<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch1" name="switch1" class="switch" />
    <label for="switch1">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch2" name="switch2" class="switch" />
    <label for="switch2">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch3" name="switch3" class="switch" />
    <label for="switch3">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch4" name="switch4" class="switch" />
    <label for="switch4">Toggle</label>
  </div>
</div>

<div class="container">
  <div class="custom-toggle">
    <input type="checkbox" id="switch5" name="switch5" class="switch" />
    <label for="switch5">Toggle</label>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以在css中添加此代码：

input.switch:checked ~ label:focus:before {
    outline: 2px solid rgb(247, 0, 220);
}
input.switch:checked ~ label:before {
    border: 2px solid rgba(236, 180, 230, 0.72);
}
相关问题
最新问题