HTML 输入样式 css :focus do not trigger

Question

我正在尝试设置联系表单的样式。我使用的是 codePen 中的示例。当我使用 https://codepen.io/SMLMRKHLMS/pen/qxtDw它工作得很好。但后来我想添加 float 标签 https://codepen.io/team/css-tricks/pen/XVBLRM

标签似乎可以工作，但下划线停止了，我不知道为什么。

:root{
    --smokegray:#bdbdbd;
    --smokewhite:#c5c5c5;
    --menugray:#9d9d9d;
    --darkergray:#333;
    --iconBlue:#289ce7;
    font-family: 'Open Sans', sans-serif;
}

body{
    width:100%;
    display:flex;
    flex-direction: column;
    background:var(--smokewhite);
   

    font-family: 'Open Sans', sans-serif;


}

header{
   
    height:800px;
    /*
    background: url(../images/Fotolia_19639690_S-1.jpg)
    no-repeat
    left top;
    */
    background-size: 100%;
    
    
}


footer{
    
    display:flex;
    background:whitesmoke;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top:1%;
}

.body-content{
    width:90%;
    margin: -10% auto;
    background: white;
    z-index: 5;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    border-radius: 10px;

    box-shadow:
    0 16px 24px 2px rgba(0, 0, 0, 0.14),
    0 6px 30px 5px rgba(0, 0, 0, 0.12),
    0 8px 10px -5px rgba(0, 0, 0, 0.2);

    -webkit-box-shadow:
    0 16px 24px 2px rgba(0, 0, 0, 0.14),
    0 6px 30px 5px rgba(0, 0, 0, 0.12),
    0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
#contentBox{
    display:flex;
    flex-direction: row;
    padding: 3% 10% 5% 10%;
    justify-content: space-around;
    
}
.softwareInfoHolder{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.5em;
}
.infoBtn{
    background-color:var(--iconBlue);
    color:white;
    padding:10%;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}
#contentBox > img{
    border: 0.5em solid var(--smokegray);
}
#footerContentBox{
    display:flex;
    flex-direction: row;
    width:100%;
    justify-content: space-evenly;
    margin-bottom:1em;
    
}
#footerLowerBox{
    padding-top:1%;
    display:flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    background-color:#323437;
    color: var(--smokewhite);
}
.container{
    padding:0;
    width:100%;
}
#footerIcons {
    font-size:2.5em;
    display:block;
    position: absolute;
    right:10em;
}
#footerLowerBox > hr{
    color:var(--smokewhite);
    width:70%;
    margin-top:1%;
    margin-bottom:1%;
}

/* NAV BAR */
nav{ padding:0.5%;
    display:flex;
    z-index: 15; 
    color:var(--darkergray);   
}

.container > .navbar-header{
        margin-left:2em;
}
a > .langMenu{
    display:flex;
    flex-direction: row;
    font-size:13px;
    width: 100%;
    align-items: baseline;
}

.langMenu > p {
    margin-left:5px;
    color:var(--darkergray);
}
.langMenu > img{
    height:10px;
    width:15px;
}

.navbar-inverse{
    background:white;
    border:none;
}

.navbar-inverse .navbar-nav > li >a, .navbar-inverse .navbar-nav > li > a{
    transition: all 0.5s ease-in-out;
    font-size:12px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
    color:var(--iconBlue);
}
.navbar-collapse.collapse.navbar-right{
    margin-right:1%;
}
.dropdown > button {
    border:none;
}
/*Header*/

#headerContainer{
    margin-top:10%;
    color:white;
    display: relative;
}
header > img {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -5;
}
#headerText{
    width:35%;
    font-size:1.5em;
    margin-left:15%;
    text-align: left;
}
.wrapperDesc{
    font-size:0.9em;
}
.dropdown-toggle{
    display:block;
    font-size:12;
}
.btnIconHolder{
    color:var(--iconBlue);
    border:none;
    display:block;
}

.navbar-nav{
    display: flex;
    align-items: baseline;
   
}
.iconMenu{margin: auto;}
.dropdown-menu.dropdownhover-bottom.lang-dropdown{
   
    width: 6em;
    min-width: 5em !important;  
}
.dropdown-menu > li{
    margin: 10px 0px;
}
.dropdown-menu > li > a{
    color:var(--darkergray);
    width: 100%;
}
.dropdown-menu {
    top:155%;
    padding: 0;
}
.dropdown-menu > li > a:hover{
    background:white;
    color:var(--iconBlue);
    transition: all 0.5s ease-in-out;
}
.menuIcon{
    color:var(--iconBlue);
    font-size:17px;}
.pLang{
    z-index:5;
    margin-left:-8px;
    color:var(--menugray);
}

.pageContent{
    display: flex;
    justify-content: space-evenly; 
    flex-wrap:wrap;
    width:100%;

}

.socialIcons{
    display:flex;
    flex-direction: column;
    font-size: 3em;
    position:absolute;
    right:1%;
    color:var(--iconBlue);
    top:200%;
}

.welcomePageContainer{
    display:flex;
    flex-direction: column;
}
.welcomePageContainer > button{
    max-width:50%;
    white-space:nowrap;
    padding:15px 2px;
    background-color:var(--iconBlue);
    color:white;
    -webkit-box-shadow: 0 2px 2px 0 rgba(51,152,204,0.14), 0 3px 1px -2px rgba(51,152,204,0.2), 0 1px 5px 0 rgba(51,152,204,0.12);
    box-shadow: 0 2px 2px 0 rgba(51,152,204,0.14), 0 3px 1px -2px rgba(51,152,204,0.2), 0 1px 5px 0 rgba(51,152,204,0.12);
    transition: all 0.5s ease-in-out;
    white-space: normal;
}
.welcomePageContainer > button:hover{
    color:white;
    -webkit-box-shadow: 0 14px 26px -12pxrgba(51,152,204,0.42),0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px rgba(51,152,204,0.2);
    box-shadow: 0 14px 26px -12px rgba(51,152,204,0.42), 0 4px 23px 0 rgba(0,0,0,0.12), 0 8px 10px -5px rgba(51,152,204,0.2);
    

}
#footerContentBox >.menu > li{
    list-style:none;
    line-height: 2em;
    color:#3C4858;
    transition:all 0.5s ease-in-out;
    font-size:0.7em;
}
.menu > li:hover{
    color:var(--iconBlue);
    cursor:pointer;
    
}
.menu > ul > li{
    list-style-type: square;
}
.activeBlue{
    color:var(--iconBlue);
}
.menuFlex{
    display:flex;
    flex-direction: column;
}


    
    /*form*/
    .contact{
        display:flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }
    .contact-form{
        display:flex;
        flex-direction: row;
        box-shadow: 0px 2px 1px 0px #DDD;
        border-radius: 2px;
        width: 40%;
        align-content: space-around;
        flex-wrap:wrap;
    }

   
      
      .wrapperInput {
        background-color: #FFF;
        box-sizing: border-box;
        
        position: relative;
        width: 40%; /*used to be 300px*/
        margin-right:10%;
      }
      
      .input {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #CCC;
        color: #555;
        box-sizing: border-box;
        font-family: 'Arvo';
        font-size: 18px;
        height: 50px;
        padding: 10px 5px;
        position: relative;
        top:0;
        width: 100%;
        height:10px;
      
        &:focus {
          outline: none;    
        }
      }
      
      input::-webkit-input-placeholder {
        color: #AAA;
      }
      
      input:focus::-webkit-input-placeholder {
        color: dodgerblue;
      }
      
      .input:focus+.underline {
        transform: scale(1)!important;
      }
      .underline+.input:focus{
          transform: scale(1)!important;
      }
      
      .underline {
        background-color: dodgerblue;
        display: inline-block;
        height: 2px;
        top: 0px;
       
        position: relative;
       
        -webkit-transform: scale(0, 1)!important;;
        transform: scale(0, 1)!important;;
        -webkit-transition: all 0.5s linear!important;;
        transition: all 0.5s linear!important;;
        width: 100%;
      }
      .wrapper100{width:100%;}
      .wrapperHigh{height:150px;}
      *.input{outline:0;}

      form {
        margin: 2em 0;
      }

      .field {
        display: flex;
        flex-flow: column-reverse;
        margin-bottom: 1em;
      }

      label, input {
        transition: all 0.2s;
        touch-action: manipulation;
      }
      
      input:placeholder-shown + label {
        cursor: text;
        max-width: 66.66%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform-origin: left bottom;
        transform: translate(0, 2.125rem) scale(1.5);
      }

      ::-webkit-input-placeholder {
        opacity: 0;
        transition: inherit;
        
      }
      ::-moz-placeholder{
        opacity: 0;
        transition: inherit;
      }

      input:focus::-webkit-input-placeholder {
        opacity: 0;
        
      }
      input:focus::-moz-input-placeholder{
          opacity: 0;
      }

      input:not(:placeholder-shown) + label,
input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <form class="contact-form" asp-action="SendEmailAsync"  >
     
    <div class="wrapperInput field">
        <input class="input" asp-for="name" type="" placeholder="@ViewBag.name" >
        <label for="name">@ViewBag.name</label>
        <span class="underline"></span>

      </div>
     
      
    <div class="wrapperInput field">
        <input class="input" asp-for="email" type="email" placeholder="email">
        <label for="email">email</label>
        <span class="underline"></span>
     </div>

    <div class="wrapperInput wrapper100 field">
        <input class="input" asp-for="subject" placeholder="@ViewBag.subject" >
        <label for="subject">@ViewBag.subject</label>
        <span class="underline"></span>
      </div>

    <div class="wrapperInput wrapper100 field"  > 
        <textarea rows="5" cols="30" class="input  wrapperHigh" asp-for="message"  placeholder="@ViewBag.message"></textarea>
        <label for="message">@ViewBag.message</label>
        <span class="underline"></span>
      </div>
     
    <button class="btn btn-outline-primary"type="submit">@ViewBag.submit</button>
    
     </form>

似乎“underline”无法进行.input:focus+underline 或.underline+.input:focus 发起的transform

Answer 1

您应该将输入标签移到上方，因为很难集中任何输入。例如:

input:placeholder-shown + label {
    transform: translate(0, 1rem) scale(1.5);
}

在那次更改之后，我可以轻松地聚​​焦任何输入。

另外请不要忘记修复 underline选择器是一个类:

.input:focus+.underline {...}

编辑: CSS 不起作用，因为 .input:focus+.underline表示类为 underline 的元素是输入的最近兄弟。但最近的兄弟是<label> .所以，请以这种方式更改您的 CSS:

.input:focus + label + .underline {....}

另请删除此代码:

.underline+.input:focus{...}

最终编辑:

.underline {
   top: 47px;
   ...
}
textarea + label + .underline {
   top: 175px;
}