CSS: фокус игнорируется в Edge и Inte rnet Explorer - PullRequest
Новая
       13

CSS: фокус игнорируется в Edge и Inte rnet Explorer

0 голосов
/ 12 февраля 2020

Я использую фокус в CSS, чтобы наши заполнители подпрыгивали, когда я щелкаю внутри, но Edge полностью игнорирует мой css. Это работает с каждым браузером, но я не нахожу никакого решения для Edge. Есть идеи, что может вызвать проблемы?

"Я посмотрел похожие статьи здесь, но ни одна из них, похоже, не работает на самом Edge. Я пробовал также с: вместо :: at ms-line также не работает." 

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>

1 Ответ

1 голос
/ 14 февраля 2020

Я попытался проверить вашу проблему и смог увидеть проблему в браузере MS Edge (Edge Html). В браузере IE ваш код работает нормально.

Я попытался добавить код CSS ниже, чтобы он работал с браузером MS Edge (Edge Html). 

/* 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 (Edge Html):

enter image description here

Вывод в IE 11 браузер:

enter image description here

Ссылка:

Плавающая метка с Css не работает по краю, inte rnet проводник

...