CSS :焦点在 Edge 和 Internet Explorer 中被忽略

Question

我正在使用 CSS 中的焦点让我们的占位符在我单击内部时跳起来，但 Edge 完全忽略了我的 css。它适用于所有浏览器，但我没有找到适用于 Edge 的任何解决方案。有什么想法会导致问题吗？

"I looked similar articles here but none of them seems working on the actual Edge. I tried also with : instead of :: at the ms- line also not working."

input {
    padding:10px;
    width:95%;
  }
 
 
 label {
    margin:10px 0;
    position:relative;
    display:inline-block;
    width:100%;
  }
    
  span {
    padding:10px;
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:0.5;
  }

  
  
  input:focus ~ span, input:not(:placeholder-shown) ~ span {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
    padding:5px 10px;;
    
  }
  
  /* For IE Browsers*/
  
  input:focus ~ span, input:not(:-ms-input-placeholder) ~ span {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
  }

<label>
     <input type="password" name="E_password" value="" placeholder=" " />
     <span>Passwort*</span>
</label>

Answer 1

我已尝试测试您的问题，并且能够在 MS Edge (EdgeHtml) 浏览器中看到该问题。在 IE 浏览器中，您的代码可以正常工作。

我尝试在下面添加一些 CSS 代码以使其与 MS Edge (EdgeHtml) 浏览器一起工作。

/* For Edge Browser*/

  input:focus ~ span, input:invalid:not(:focus)::-webkit-input-placeholder {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
  }

修改后的代码：

<!doctype html>
<html>
<head>
<style>
input {
    padding:10px;
    width:95%;
  }
 
 
 label {
    margin:20px 0;
    position:relative;
    display:inline-block;
    width:100%;
  }
    
  span {
    padding:10px;
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:0.5;
  }

  
  
  input:focus ~ span, input:not(:placeholder-shown) ~ span {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
    padding:5px 10px;;
    
  }
  
  /* For IE Browsers*/
  
  input:focus ~ span, input:not(:-ms-input-placeholder) ~ span {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
  }

/* For Edge Browser*/
  
  input:focus ~ span, input:invalid:not(:focus)::-webkit-input-placeholder {
    opacity:1;
    transform:translateY(-100%) translateX(-10px);
    font-size:10px;
  }
</style>

</head>
<body>
<label>
     <input type="password" name="E_password" value="" placeholder=" " />
     <span>Password<sup><font color="red" class="imp" >*</font></span>
</label>  
</body>
</html>

MS Edge (EdgeHtml) 浏览器中的输出：

在 IE 11 浏览器中的输出：

参考：

CSS :焦点在 Edge 和 Internet Explorer 中被忽略

CSS :focus is ignored in Edge and Internet Explorer

css

internet-explorer

focus

microsoft-edge