2

我试图让一个输入文本字段在它处于焦点时在其周围有一个厚的蓝色边框，然后在它不再处于焦点时默认回到其正常的默认边框。我的输入字段之一是这样定义的：

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

当它处于焦点时，这正确地在它周围放置了一个蓝色边框，但是当它不再处于焦点时，它完全失去了默认文本字段。没有定义任何输入文本字段边框；他们的样式是此类字段的默认样式，我只是想让它在失去焦点后恢复为这种样式。

4

4 回答 4

5

css 有一个 :focus 伪选择器，您可以将样式附加到该选择器上。

input:focus { border:2px solid #036; }

另外，不要忘记使用正确的文档类型。<!DOCTYPE html>

于 2012-01-25T19:55:39.603 回答
1

不是直接style使用 JavaScript 修改属性，而是添加和删除类名，并使用 CSS 定义类：

.newInputClass {
    border: 2px solid #003366;
}

并且，在 HTML 中：

<input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
于 2012-01-25T19:56:25.517 回答
0

这是因为当您集中注意力或“模糊”时，实际上是从文本框中删除了整个样式，而不是将其恢复为默认值。

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

将您的模糊语句设置为具有以下值。你想要一个边框样式： inset;

border-style: inset; 
border-width: 2px;

希望这可以帮助

于 2012-01-25T19:56:00.757 回答
0

试试这个：

onblur="this.style.border='none';"

甚至更好地避免使用内联样式并按照@David 的建议交换一个类。

于 2012-01-25T19:56:37.390 回答