-2

我试图让字段在焦点上时周围有边框颜色，然后在不再焦点时默认回到正常的默认边框

<p>
            <label for="username">
                <span>Enter Email</span>
                <input type="text" id="Text4" name="username" 
                    onfocus="this.style.borderColor='#00B4FF'" onblur="this.style.borderColor='#D9D9D9'"
                    class="semi-medium-text" /></label><span id="Span4"></span></p>

另一个是

<p>
            <label for="list">
                <span>My dropdwnn</span>
                <select id="Select9" class="semi-selction" maxlength="255" onfocus="this.style.borderColor='#00B4FF'"
                    onblur="this.style.borderColor='#D9D9D9">
                    <option value="">Select  Type</option>
                    <option value="1">A</option>
                    <option value="3">B</option>

                </select>
        </p>

正在使用的 CSS 类是

.semi-medium-text, #region-selector-div input {
border: 2px solid #D9D9D9;
border-radius: 5px 5px 5px 5px;
height: 25px;
padding: 5px;
vertical-align: middle;
width: 350px;
}

用于下拉列表的类是

.semi-selction {
border: 2px solid #D9D9D9;
border-radius: 5px 5px 5px 5px;
height: 37px;
padding: 5px;
vertical-align: middle;
width: 362px;
}

当它处于焦点/模糊状态时，这正确地在它周围放置了一个边框颜色，但是当它不再处于焦点/模糊状态时，边框颜色相同..这是问题..提前感谢您的建议

4

1 回答 1

1

您在第二个代码块中错过了一些引号，这似乎是问题所在：

<select id="Select9" class="semi-selction" maxlength="255" onfocus="this.style.borderColor='#00B4FF'"
                onblur="this.style.borderColor='#D9D9D9">

应该：

<select id="Select9" class="semi-selction" maxlength="255" onfocus="this.style.borderColor='#00B4FF'"
                onblur="this.style.borderColor='#D9D9D9'">

我已经对其进行了测试，并且效果很好。

我还可以建议将样式添加outline:none;到您的选择框中吗？Chrome 和我认为 Firefox 默认情况下会在 s 周围放置一个丑陋的框<select>，它会破坏你所追求的效果。

于 2012-11-27T13:35:15.240 回答