Question

我在选择文本框时尝试更改样式时遇到问题。在选择文本框以便输入文本框时，该框周围有一个蓝色边框，我想摆脱它。

这是我的HTML：

<input type="text"class="inputs" placeholder="E-Mail" id="text-email"/>
<input type="password" class="inputs2" placeholder="Password" id="text-password"/>

这是我的css {

.inputs  { 
    background: #282b32;
    display: block; 
    padding: 12px 10px; 
    color: #ffb900;
    font-size: 3.6em; 
    font-family: headingFont;
    border-bottom: 1px solid black;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    width:570px;
    height:61px;
    text-align: center;
}

::-webkit-input-placeholder {
    color: #ffb900;
}

#text-email {
    position: absolute;
    left:25px;
    top: 250px;
}

#text-password {
    position: absolute;
    left:25px;
    top: 335px;
}

非常感谢任何帮助！

Answer 1

.input
{
    width: 100px;
    height: 30px;
}
.input:focus
{
    border:  solid 1px #000;
}

<input type="text" class="input"/>

您可以将焦点属性用于文本框

Answer 2

添加此css

outline:0;

这是Example

Answer 3

看看这个小提琴http://jsfiddle.net/33ntR/1/

HTML

<input type="text"class="inputs" placeholder="E-Mail" id="text-email"/>
<input type="password" class="inputs2" placeholder="Password" id="text-password"/>

CSS

.inputs  { 
background: #282b32;
display: block; 
padding: 12px 10px; 
color: #ffb900;
font-size: 3.6em; 
font-family: headingFont;
border-bottom: 1px solid black;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width:570px;
height:61px;
text-align: center;
}

::-webkit-input-placeholder {
color: #ffb900;
}

#text-email {
position: absolute;
left:25px;
top: 250px;
}

#text-password {
position: absolute;
left:25px;
top: 335px;
}

#text-email:focus{
    background-color:red;
    border:10px solid #cdcdcd;
}

#text-password:focus{
    background-color:green;
    border:4px solid #caaaaa;
}

主要内容是：css中的focus属性。详情请见http://www.w3schools.com/cssref/sel_focus.asp

如何更改文本框输入中的选定样式

3 个答案: