Is it possible to remove the dotted line surrounding a selected item in a select element?
I have tried to add the outline property in CSS but it did not work, at least not in FF.
<style>
select { outline:none; }
</style>
Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/
Remove outline/dotted border from Firefox All Selectable Tags.
Put this line of code in your style sheet:
*:focus{outline:none !important;}
Step 1) Add HTML: Add the select options of your choice and add the attribute: contenteditable="true"
Step 2) Add CSS: Use the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property:
[contenteditable] {
outline: 0px solid transparent;
}
select {
border: none;
}<select contenteditable="true">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>select:focus {
box-shadow: none;
}
To remove the outline of the select box when selected/focused.
https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized check this out Download the plugin from here
