Question

所以我被这个代码片段困住了。我的问题是“check”一词应该是绿色的（并且只有当它实际检查时），但现在“checkbox label element”采用“inputfield label element”中的样式。有没有办法让2个“标签”元素（“复选框标签”和“输入字段标签”）相互独立？

/*Input Field*/

.field {
  font-family: sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column-reverse;
      flex-flow: column-reverse;
}
label,
input {
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
input {
  font-size: 24px;
  border: 0;
  border-bottom: 1px solid #ccc;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 5px 0;
}
input:focus {
  outline: 0;
  border-color: #FF0000;
}
input:placeholder-shown + label {
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: translate(0, 2.125em) scale(1.5);
          transform: translate(0, 2.125em) scale(1.5);
}
input:not(:placeholder-shown) + label,
input:focus + label {
  -webkit-transform: translate(0, 0) scale(1);
          transform: translate(0, 0) scale(1);
  cursor: default;
  color: #FF0000;
}
label {
  max-width: 66.666%;
  color: #ccc;
}
::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: inherit;
  transition: inherit;
}

/*Checkbox*/
[type='checkbox'] {
  position: absolute;
  left: -100vw;
}

[type='checkbox'] + label{
  --c-hl: dimgrey;
  display: flex;
  align-items: center;
  color: var(--c-sel, var(--c-hl));
  font: 1.5rem/ 1 consolas, monaco, monospace;
  cursor: pointer;
}
[type='checkbox'] + label:before {
  margin-right: .375em;
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 2px var(--c-sel, var(--c-hl));
  text-align: center;
  color: var(--c-sel, transparent);
  content: "✔";
}
[type='checkbox']:focus + label, [type='checkbox']:hover + label {
  --c-hl: #239023;
}
[type='checkbox']:checked + label {
  --c-sel: #239023;
}

<html>
    <head>
    <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body>
 
    <!--Input Field -->
    <div class="field">
		 <input type="text" name="fullname" id="fullname" placeholder="Full Name" autofill="autofill">
		 <label for="fullname">Name</label>
	</div>
                   
    <!-- Chekcbox-->
    <input type='checkbox' id='check'/>
    <label for='check'>check</label>
                   
    </body>
</html>

Answer 1

https://jsfiddle.net/Liamm12/7by8nkpL/1/

我刚刚使用id="new"创建了新输入并编辑了标签for="new"并添加了此代码，您可以看到我在css中添加它的ID #new以进行特殊设计。

    [type='checkbox']#new:focus + label, [type='checkbox']#new:hover + label {
      --c-hl: blue;
    }
    [type='checkbox']#new:checked + label {
        --c-sel: blue;
    }
    input#new:not(:placeholder-shown) + label, input#new:focus + label {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        cursor: default;
        color: blue;
    }

检查此代码

CSS：

/*Input Field*/

.field {
  font-family: sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column-reverse;
      flex-flow: column-reverse;
}
label,
input {
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
input {
  font-size: 24px;
  border: 0;
  border-bottom: 1px solid #ccc;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 5px 0;
}
input:focus {
  outline: 0;
  border-color: #FF0000;
}
input:placeholder-shown + label {
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: translate(0, 2.125em) scale(1.5);
          transform: translate(0, 2.125em) scale(1.5);
}
input:not(:placeholder-shown) + label,
input:focus + label {
  -webkit-transform: translate(0, 0) scale(1);
          transform: translate(0, 0) scale(1);
  cursor: default;
  color: #ff00c4;
}
label {
  max-width: 66.666%;
  color: #ccc;
}
::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: inherit;
  transition: inherit;
}

/*Checkbox*/
[type='checkbox'] {
  position: absolute;
  left: -100vw;
}

[type='checkbox'] + label{
  --c-hl: dimgrey;
  display: flex;
  align-items: center;
  color: var(--c-sel, var(--c-hl));
  font: 1.5rem/ 1 consolas, monaco, monospace;
  cursor: pointer;
}
[type='checkbox'] + label:before {
  margin-right: .375em;
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 2px var(--c-sel, var(--c-hl));
  text-align: center;
  color: var(--c-sel, transparent);
  content: "✔";
}
[type='checkbox']:focus + label, [type='checkbox']:hover + label {
  --c-hl: #000;
}
[type='checkbox']:checked + label {
    --c-sel: #8d89b6;
}
[type='checkbox']#new:focus + label, [type='checkbox']#new:hover + label {
  --c-hl: blue;
}
[type='checkbox']#new:checked + label {
    --c-sel: #a20000;
}
input#new:not(:placeholder-shown) + label, input#new:focus + label {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    cursor: default;
    color: #89ff10;
}

HTML：

<div class="field">
     <input type="text" name="fullname" id="fullname" placeholder="Full Name" autofill="autofill">
     <label for="fullname">Name</label>
</div>

<!-- Chekcbox-->
<input type='checkbox' id='check'/>
<label for='check'>check</label>
               <br>
<input type='checkbox' id='new'/>
<label for='new'>New one</label>

以不同的方式设计2个元素

1 个答案: