CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Neerav Patel
Neerav Patel

Reputation: 31

radio button is showing with extra outline in IE and firefox

Here is my code for radio button

<div class="question">
    <label for="gender" style="display: none">Gender</label>
    <fieldset class="two-radio">
        <legend>Gender</legend>
        <label>
            <input type="radio" id="gender" name="gender" class="radioInput" 
                ng-model="namedInsured.gender" value="Male" required> Male
        </label>
        <label>
            <input type="radio" id="gender" name="gender" class="radioInput" 
                ng-model="namedInsured.gender" value="Female" required> Female
        </label>
    </fieldset>
</div>

Its working finr in chrome but for IE its showing dotted outline and in firefox when you select radio button than it shows outline but after going to next element its not. I also have other radio button in same page with same problem. So can anyone help me with removing these outlines? Thank you in advance for your time

Upvotes: 1

Views: 1143

Answers (2)

Neerav Patel
Neerav Patel

Reputation: 31

I got the answer. So the problem was in firefox it was outline while in IE it was border.

So in order to remove both I have to put

border: none; outline: none; in my stylesheet and vola... everything is working perfectly.

Upvotes: 1

Rob Parsons
Rob Parsons

Reputation: 839

Chromium adds an outline to focused elements, even grouping elements like div's.... I'm surprised that it is happening in IE and Gecko and not webkit......

your stylesheets must be using -webkit prefixes....(use the webkit developer tool to trace the style rules on your elements... anything with a -webkit- prefix is proprietry to webkit browsers.

to remove outlines on focus elements use

*:focus{outline:none}

in your bootstrap css.

Upvotes: 1

Related Questions