Question

I am trying to get on fields to have a border color around it when it is in focus and then to default back to its normal default border when it is no longer in focus

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

and other one is

<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 class that am using is

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

and class that are using for dropdown list is

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

This correctly puts a border color around it when it is on focus/blur, but when it is no longer in focus/blur, border color remians same.. that is problem..
thanks in advance for suggestions

Answer 1

You missed some quotes on your second block of code, that seems to be the problem:

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

Should be:

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

I’ve tested it and it works a treat.

Can I also recommend adding the style outline:none; to your select box? Chrome and I think Firefox puts an ugly box around <select>s by default and it would kind of ruin the affect your going for.