你好我有问题... 我想更改登录表单中的用户名和密码文本框突出显示颜色... 当我点击它时,它被选为正方形 但它不是方形而是圆形 这是我的代码,显示了我的问题....
html:
<div id="username">
<form>
<p><span>UserName:</span>
<input name="UserName" type="text" size="0" id="box1" >
</p>
</form>
</div>
<div class="login_form" id="pass">
<form>
<p>
<span>Password:</span>
<input name="lastname" type="password" id="box2">
</p>
</form>
</div>
CSS:
#pass {
position: absolute;
top: 22px;
left: 963px;
right: 10%;
width: 280px;
height: 62px;
border-radius: 20px;
font-family: corbel;
}
#username {
position:absolute;
top: 23px;
left: 709px;
right: 10%;
width: 280px;
height: 61px;
font-family: corbel;
border:medium;
border-color:black;
}
#button {
position: absolute;
left: 1170px;
top: 40px;
background-color: #FFFFFF;
font-family:corbel;
}
#loginform {
position:absolute;
left:100px
}
#bar{
position:absolute;
top:0;
left:0;
background-color:black;
}
#login{
position: absolute;
top: 42px;
left: 1202px;
width: 63px;
height: 19px;
background-color: #2799b6;
text-align: center;
font-family: corbel;
border-radius:20px;
color:#FFF;
font-size:15px;
opacity:1;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
#link {
text-decoration:none
}
#login:hover {
opacity:0.7;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
#box1 {
border: 2px solid #bfbfbf;
border-radius:20px;
}
#box2 {
border: 2px solid #bfbfbf;
border-radius:20px;
}
最佳答案
我认为使用 CSS 的 focus
属性应该可行:
input:focus {
border: 1px solid #006600;
}
编辑: DEMO [JSFIDDLE]
更新:要删除默认轮廓(黄色),您可以将outline
属性设置为none
:
input {
outline:none;
}
关于javascript - 如何使用户名框突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23087345/