can not remove the dotted border from submit button on Firefox - javascript

I am using Firefox 27.0.1. I have a third party form that I only have acces to its CSS style, and not to the html code.
I tried to remove the dotted border on the submit button using: div.submit input[type="submit"] {outline:none;} but it still appear...
any other way to remove it?

That looks like a focus event, try this:
div.submit input[type="submit"]:focus {
outline:none;
}

Check if you have 'focus' inside your CSS file which focuses the item as a dotted.

Thanks for all answers,
what help me to get rid from the dotted border is:
div.submit input[type="submit"]:focus {outline:none;}
div.submit input[type="submit"]::-moz-focus-inner {border:0;}

Related

How can I change the border color on my <select> element without effecting bootstrap css styling?

I have a bootstrap (v4.5.3) form, where my selects look like this in firefox:
When someone tries to submit the form, I have some JS code that runs, and does validation. One of the things it checks for is that someone actually chose an option, and didn't leave it on -- Select an Option --. When I detect this, my javascript would stop form submission, and highlight the option by setting the border to red:
ELEMENT.style.borderColor = "red";
Unfortunately, when I do that, my select loses whatever styling bootstrap put on it, and looks like this:
I left the bottom one untouched for easy comparison.
Am I highlighting it wrong? Is there some css class I'm supposed to use instead of changing the borderColor?
Edit: See https://jsfiddle.net/xbqucoLp/ for example
Bootstrap actually comes with validation CSS built in. The style of the select in bootstrap is different to what you have in your question so it may not be to your liking. It does however keep the select arrow consistent unlike what you currently have.
See https://getbootstrap.com/docs/5.0/forms/validation/ for details
Here is a working fiddle: https://jsfiddle.net/0gqL7641/1/
The advantage of using this is that when you choose an option it changes from red to green.
If the above is unacceptable to you, then the following will work:
You can use outline instead of border and this doesn't change the styling of select
this.style.outline = "solid 1px red";
Another way of changing the outline without touching border is to use shadow
.redOutline {
-webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}
and use the following to add the outline
this.classList.add("redOutline");
You can tweak the shadow CSS using this tool https://html-css-js.com/css/generator/box-shadow/
Have you tried adding a class to the element instead?
like this
element.classList.add("mystyle");
that might work as long as the only thing that class contains is a border color with !important
Ah I didn't realize there was a difference sorry. Usually for these custom selects, there are classes that overlay the browser select to get custom features. I would see if you can target those classes and change their border color. Looking for the elements in the browser dev-tools allows you to change their css in the browser to test if you can do that to see what element you need to target.

Remove circle after clicking on input type submit (Bootstrap)

I am getting a border and a circle after clicking on a input type submit in Bootstrap:
I managed to remove the border by adding this to css:
*:focus {
outline: none !important;
}
However, I can't get rid of the circle.
Would be delighted if someone could help me.
Thanks,
R.G.
It's probably disabled. Check the submit button tag to see if disabled is an attribute.

How do you remove the default outline around input elements?

I would like know if is possible disable "focus" which is set by default browser in input elements?
Update
When an input element is in focus, the browser adds a border (typically blue) around it. This is breaking my layout. So I wonder if you can disable it.
Set outline:0; on those elements.
Add this in your CSS:
input:focus {
outline:none;
}
This
how to remove the default focus on submit button in HTML form?

Fading Text Input Javascript Ajax

I am trying to find a script that would let me do what YP.com does. If you look at the business search input it says Business Name or Category. Then if you click on it, the text fades a little, and when you type words, it fades completely. How would I do this? Any help would be greatly appreciated.
You can have a look at this jQuery example :
http://www.benwatts.ca/2008/07/19/jquery-input-text-replacement/
Declare 2 CSS classes :
.black{
color:black;
}
.grey{
color:grey;
}
The default CSS class for your input can be the black class.
Like in the link above :
Use the focus event for changing the CSS to the grey class
Use the blur event for changing the CSS to the black class
Add the onKeyDown event to delete the original value and change the CSS to the black class.
You could use onfocus to do the first fade. Then onkeydown and fade completely.

How to not show yellow focus on form (input or textarea) just like on Facebook

I see that the form elements on Facebook are not highlighted when in focus.
how can I do that?
With chrome for example if I click on this textarea it becomes orange or yellow.
input:focus{outline:0;}
Simply change some styles for your form elements and the browser's defaults will not take effect.
.textArea:focus
{
background-color:#FFF;
}
Apply this class to your textareas. Or apply them to all your areas at once:
input:focus
{
background-color:#FFF;
}

Categories

Resources