对齐标签和输入标签

时间：2019-10-04 06:18:32

标签： html css 

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<!DOCTYPE html>
<html>
<body>
<h1>Custom Checkboxes</h1>
<div class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
  <label>One</label>
</div>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
</body>
</html>

我想将标签标签排列在相同级别上，并在输入标签之后。因此，当输入标签被禁用时，我可以给它一个css标签。我不知道该怎么做。因此，当输入标签被禁用时，我可以使标签标签不透明。

我尝试了一个div，然后将标签排列在输入或span标签之后。但这不起作用。

第一个复选框不起作用，因为我更改了标签标签。但这就是我想要的。

4 个答案:

答案 0 :(得分：1)

将您的input和span包装到标签中

<h1>Custom Checkboxes</h1>
<div class="container">
<label for="one">One
  <input id="one" type="checkbox" checked="checked">
  <span class="checkmark"></span>
  </label>
</div>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

https://jsfiddle.net/lalji1051/xtn3esqu/5/

答案 1 :(得分：0)

您必须使用position: absolute;作为标签，以增加可点击的空间。 

/* The container */
.container {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Additional styles */
.check-wrapper {
  position: relative;
  width: 100px;
}

label[for="check1"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 30px;
  cursor: pointer;
  /* outline to see the difference */
  border: 1px solid red;
}
<h1>Custom Checkboxes</h1>

<div class="container">
  <!-- added a wrapper -->
  <div class="check-wrapper">
    <input id="check1" type="checkbox" checked="checked">
    <span class="checkmark"></span>
    <label for="check1">One</label>
  </div>
</div>

答案 2 :(得分：0)

希望这会有所帮助

.customCheckBox__Wrapper {
  display: flex;
  width: auto;
  flex-flow: row wrap;
  flex-basis: auto;
  position: relative;
  box-sizing: border-box;
  margin: 0.125em;
}

.customCheckBox__Wrapper * {
  box-sizing: border-box;
}

.cstumLbl_ {
  transition: all 200ms ease-in-out;
  content: "";
  display: flex;
  flex: 0 auto auto;
  padding: 0.125em 0.5em;
  width: 100%;
  position: relative;
  line-height: 1.4em;
  padding-left: 2.5em;
}

.cstumLbl_:hover {
  cursor: pointer;
}

.glyp_checked {
  display: block;
  opacity: 1;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 6.5px;
  top: 0.5px;
  fill: #ffffff;
  z-index: 200;
  margin-right: 1.75em;
  border: 1px solid #808080;
  transition: all 200ms ease-in-out;
}

.cstumChxBx_ {
  display: inline;
  position: absolute;
  z-index: -10;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
}

.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
  display: block;
  opacity: 1;
  border-radius: 2px;
}

.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked {
  background: #000080;
  fill: #ffffff;
}

.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked {
  background: #ffffff;
  fill: #000000;
  border-color: #000080;
}

.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
  background: #008080;
  fill: #ffffff;
}

.cstumChxBx_:disabled+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._RgsCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._RgsCse__>.glyp_checked {
  background: rgba(120, 120, 120, 0.25);
  border: 1px solid #787878;
  display: block;
  opacity: 0.2;
  fill: #3f3f3f;
}
<svg style="display:none;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<symbol viewBox="0 0 24 24" id="checked_">
	<path d="M18,6l-7.8,7.8c-0.4,0.4-1,0.4-1.4,0L6,10.9c-0.4-0.4-1-0.4-1.4,0l-0.7,0.7c-0.4,0.4-0.4,1,0,1.4l3.5,3.5l0,0L8.8,18
		c0.4,0.4,1,0.4,1.4,0l9.9-9.9c0.4-0.4,0.4-1,0-1.4L19.4,6C19,5.6,18.4,5.6,18,6z"/>
</symbol>
</svg>

<span class="customCheckBox__Wrapper">
  <input class="cstumChxBx_" disabled checked type="checkbox" id="normal_" />
  <label class="cstumLbl_ _SplCse__" for="normal_">
    <span class="glyp_checked">
      <svg  viewBox="0 0 24 24">
        <use xlink:href="#checked_"/>
     </svg>
    </span>
<span>label 1</span>
</label>
</span>

<span class="customCheckBox__Wrapper">
  <input class="cstumChxBx_" type="checkbox" id="Normal__" />
  <label class="cstumLbl_ _NrmlCse__" for="Normal__">
     <span class="glyp_checked">
      <svg  viewBox="0 0 24 24">
        <use xlink:href="#checked_"/>
      </svg>
    </span>
<span>label 2</span>
</label>
</span>

<span class="customCheckBox__Wrapper">
  <input class="cstumChxBx_" type="checkbox" id="intermediate_" />
  <label class="cstumLbl_ _RgsCse__" for="intermediate_">
     <span class="glyp_checked">
      <svg  viewBox="0 0 24 24">
        <use xlink:href="#checked_"/>
      </svg>
    </span>
<span>label 3</span>
</label>
</span>

答案 3 :(得分：0)

您可以使用此代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        /* The container */
        .container {
          display: block;
          position: relative;
          padding-left: 35px;
          margin-bottom: 12px;
          cursor: pointer;
          font-size: 22px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        /* Hide the browser's default checkbox */
        .container input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0;
        }
        /* Create a custom checkbox */
        .checkmark {
          position: absolute;
          top: 5px;
          left: 0;
          height: 25px;
          width: 25px;
          background-color: #eee;
        }
        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
          background-color: #ccc;
        }
        /* When the checkbox is checked, add a blue background */
        .container input:checked ~ .checkmark {
          background-color: #2196F3;
        }
        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
          content: "";
          position: absolute;
          display: none;
        }
        /* Show the checkmark when checked */
        .container input:checked ~ .checkmark:after {
          display: block;
        }
        /* Style the checkmark/indicator */
        .container .checkmark:after {
          left: 9px;
          top: 5px;
          width: 5px;
          height: 10px;
          border: solid white;
          border-width: 0 3px 3px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Custom Checkboxes</h1>
        <label class="container">One
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
        <label class="container">Two
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">Three
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">Four
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

相关问题
最新问题