在我的网站，我有一个按钮，我希望用户能够使用切换登录窗口时，它被点击。只使用CSS的最好方法是什么?我只知道":hover"技巧，但我不知道是否有"用户按钮点击"的东西。
当用户单击该区域内的任何位置时，表单不应该消失，但当用户单击该区域以外的任何位置时，表单应该消失。我还计划在右上方使用图像文件放置一个"X"关闭按钮，这样当用户点击它时，登录表单就会关闭。
我怎样才能只使用CSS呢?
#loginWindow{
height: 200px;
width: 200px;
border: 1px red solid;
background-color: red;
padding: 20px;
}
.loginForm {
margin: 10px;
padding: 5px;
}<button type="button" id="toggle">Toggle Log In Window</button>
<div id="loginWindow">
<form>
<input type="text" id="login" class="loginForm" placeholder="Enter username"><br>
<input type="password" id="password" class="loginForm" placeholder="Enter password"><br>
<button type="submit" id="login" class="loginForm">Log In</button>
</form>
</div>仅使用CSS是无法实现这一点的。
CSS用于样式而不是用于交互性。如果你想对你的用户进行交互响应，那么javascript是你的选择，为什么你要尽量避免它呢?
这是可以实现的，只有几行js。
var toggle=true,
loginwindow = document.getElementById('loginWindow'); #loginWindow{
height: 200px;
width: 200px;
border: 1px red solid;
background-color: red;
padding: 20px;
}
.loginForm {
margin: 10px;
padding: 5px;
} <!DOCTYPE html>
<html lang="en">
<body>
<button type="button" id="toggle" onclick="toggle=!toggle;loginwindow.style.display = toggle?'block':'none'">Toggle Log In Window</button>
<div id="loginWindow">
<form>
<input type="text" id="login" class="loginForm" placeholder="Enter username"><br>
<input type="password" id="password" class="loginForm" placeholder="Enter password"><br>
<button type="submit" id="login" class="loginForm">Log In</button>
</form>
</div>
</body>
</html>