Question

我正在尝试使字段在焦点处于其周围时具有边框颜色，然后在不再处于焦点时默认返回其正常的默认边框

<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;
}

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

Answer 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会在<select>左右放置一个丑陋的框，这会破坏你的影响。

删除边框如果其他人是onblur，则为其他人的颜色

1 个答案: