Francisco Paz Francisco Paz - 4 months ago 10
CSS Question

this property overflow:visible makes to double click an elemet?

The part of the

overflow:visible
code does need to double click on the item to be activated,someone knows why?

input:focus,select:focus{
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: 0;
color:#444444;
font-size:11px;
overflow:visible;
font-family:"Century Gothic", Helvetica, sans-serif;
}


here an example with more code

`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:focus,select:focus{
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: 0;
color:#444444;
font-size:11px;
overflow:visible;
font-family:"Century Gothic", Helvetica, sans-serif;
}
</style>
</head>
<body>
<input type="text">
<select name="prueba" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</body>
</html>


`

Answer

try to remove the :focus pseudo-class. The focus means, that the overflow:visible; applies only when the input or select gain focus (by clicking on it).

Comments