gpt4 book ai didi

html - CSS 文本框焦点

转载 作者:太空宇宙 更新时间:2023-11-04 11:23:32 24 4
gpt4 key购买 nike

我正在尝试禁用/删除文本框中的边框或蓝色发光。

.user {
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}

.user::-webkit-input-placeholder {
color: #ffffff;
}

.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}

.password::-webkit-input-placeholder {
color: #ffffff;
}

表单部分:

<form method="post" class="login_form">
<div style="font-size: 20px; font-family: bebasregular; text-align: right; color: #ffffff;">Login</div>
<input type="text" name="user" class="user" id="user" placeholder="Username or Email"/>
<hr/>
<input type="password" name="password" class="password" placeholder="Password"/><br/>
<input type="submit" name="login_btn" class="login_btn" value="Login"/>
</form>

现在,我要做的是让表单中的两个文本框变得透明,即使它们处于焦点位置也是如此。

我试过下面这段代码,但它不起作用。

.user{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}

.user:focus{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}

.user::-webkit-input-placeholder {
color: #ffffff;
}

.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}

.password:focus {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}

.password::-webkit-input-placeholder {
color: #ffffff;
}

最佳答案

您可以通过添加以下内容来删除它:outline: none; 到 .user 类(或任何可能接收大纲的元素):

JS Fiddle

旁注:
我认为值得注意的是,在您的 hover 状态下,您只需要指定在该状态下发生变化的属性。例如,如果元素文本颜色最初是白色,而您希望它在悬停状态下仍然是白色,则可以在 hover 状态下忽略它。

关于html - CSS 文本框焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32576660/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com