CSS - 防止提交按钮获得焦点

时间:2011-03-20 12:06:39

标签: css focus styling

在Opera中,当文本字段被聚焦时,提交按钮会出现一个丑陋的黑色边框。

您可以在屏幕截图中看到这一点。 enter image description here

在图像的底部,textarea聚焦并且提交按钮看起来很糟糕。如何使用CSS阻止这种情况?

UPDATE:按钮的CSS为

.uiGreenButtonOuter {                     
 border: 1px solid  #234723;
 cursor: pointer;
}

.uiGreenButtonInner {
 margin: 0;
 font-size: 11px;
 display: block;
 background: #3E7E3E;
 padding: 4px 6px;
 border-width: 1px;
 border-style: solid;
 border-color: #6AB76B #3A763B #3A763B;
 color: white;
 text-align: center;
 text-shadow: 0 1px 0 #234723;
 cursor: pointer;
}

.uiGreenButtonOuter:hover .uiGreenButtonInner {
 text-decoration: none;
 background: #4C9B4C;
}

.uiGreenButtonInner:focus{
 outline: 0;
}

2 个答案:

答案 0 :(得分:1)

这将完成这项工作:

input[type="submit"] {
    border: 0;
}

如果您的html设置如下:

<form action="">
    <textarea name="fos"></textarea>
    <span class="uiGreenButtonOuter">
      <input class="uiGreenButtonInner" type="submit" name="send" value="Nyedva" />
    </span>
</form>

这是demo

答案 1 :(得分:0)

你可以使用:focus或:模糊伪类来做这个伎俩。我们需要代码来理解确切的问题。

例如

textarea:focus {/* your css here */}