Change Background Color of Input Box Html
Why do you not want to answer this thread?
(Your answer will be sent to Jim and Aytekin)
-
Hi again Jotform Support Team!
I am always relying to your great support ever.
Please tell me how or what CSS code can I use for changing text box color when something is entered.
For example, "o" or just "adding a blank space" is written on the text box, then color white will change to yellow.
I will wait for your kind reply.
Thank you so much in advance! -
Hi there,
By using the following CSS rule, the form's inputs will have the desired customization.
input:focus {
background-color: yellow;
}
Below, you can see the results of it:
For further assistance, please do let us know.
Regards.
-
Hi Sir Mert!
I really appreciate your quick help! (^__^)/However, I wish that the edited text box will retain the new yellow color.
But will return to white color if the character is deleted from the text box...I hope it's possible......but if not, I'll think another way then.
I will wait for your great reply.
Thank you as always!!! -
Hi again,
Firstly, you are most welcome. Now, I understand what you want; but we can't achieve this goal with CSS, there is no selector which is doing the thing you want in the CSS language. However, we can achieve this issue with some Javascript. Before we start, please download the source code of your form, because we need to add some <script> in its HTML.
On the HTML file of your form please add the following code between <head>...</head> tags:
<script>
$(function(){
$('input:required,textarea:required').on('blur', function(){
if($(this).val()!==''){
$(this).addClass('yellow-background');
} else {
$(this).removeClass('yellow-background');
}
});
});
</script>
Then, add the following CSS codes to the "form.css" file which is in the "style" folder:
.yellow-background {
background-color:yellow;
}
input:required:focus {
border: 1px solid red;
outline: none;
}
textarea:required:focus {
border: 1px solid red;
outline: none;
}
This changes will make the desired changes on your form. Please, do let us know the results after trying it.
Regards.
-
WOW! What a swift help~
However, I am very sorry but I don't know where is the <head> there,I couldn't find after I copied or even download the source code..
Could you please kindly clone my form here https://form.jotform.co/60941088545865
I will just clone your updated form.I am really sorry, but I have very little knowledge of html...
Please help Sir...
Thank you so much in advance~ -
Hello,
As mentioned by mert, you will have to download the HTML source code of your form. This user guide will help you understand the steps on how to achieve to get the full source. Also, you will have to upload your form with the modified source on your website and not depend on Jotform's host.
Here's a better sample of the result after following mert's instructions:
http://liyam.comuf.com/JotForm/sampleBJ2.html
What I did there is save an HTML file from the full source and inserting mert's instructions.
If you need further clarification, please do let us know.
-
Hi Sir Liyam and Sir Mert!
I am really grateful to your kind assistance.
I just realized that it would take time and be tasky, so I've decide to think another strategy for this.Once again, thank you for your great assistance as always!
-
You are most welcome. As I explained before, there is no easy solution for your scenario, because CSS isn't enough to solve the problem. However, if you need any extra help, please do let us know.
Thank you.
Change Background Color of Input Box Html
Source: https://www.jotform.com/answers/811688-how-to-change-the-background-color-of-the-input-field-when-it-is-selected
0 Response to "Change Background Color of Input Box Html"
Post a Comment