Удаление выделенного текста в фокусе

Question

Когда я открываю модальное окно, значение текстового поля в фокусе выделено синим цветом. Я не уверен, какие свойства CSS следует использовать для удаления выделенного голубого цвета в фокусе из текста , Я попробовал ниже, но он не работает.

input[type="text"], textarea{ 
    outline: none; 
    box-shadow:none !important; 
    border:1px solid #ccc !important; 
} 

Answer 1

Вы можете использовать user-select, чтобы избежать выбора любого текста

input { 
 
    -webkit-user-select: none; /* Chrome all/Safari all */ 
 
    -moz-user-select: none;  /* Firefox all */ 
 
    -ms-user-select: none;  /* IE 10+ */ 
 
    user-select: none;   /* Likely future */  
 
}

<input type="text">

Будьте осторожны с этим, потому что вы избегаете, чтобы выбрать строку для пользователей, и это приводит к утрате доступности.

Answer 2

Альтернатива user-select собственности suggested by Marcos является использование ::selection и ::-moz-selection (по своим собственным правилам) специально установленных/снятие цвета/фон выделенного текста (без отключения выбора функции).

input[type="text"]::selection, 
 
textarea::selection { 
 
    background-color: inherit; 
 
    color: red; 
 
} 
 
input[type="text"]::-moz-selection, 
 
textarea::-moz-selection { 
 
    background-color: inherit; 
 
    color: red; 
 
} 
 

 
input[type="text"], 
 
textarea { 
 
    outline: none; 
 
    box-shadow: none !important; 
 
    border: 1px solid #ccc !important; 
 
}

<input type="text" value="test value for selection" /> 
 
<hr/> 
 
<textarea>test text for selection</textarea>