Change required Textbox field border to color red when empty

Hi;

In this form I have used

.form-line-error {

background:none ;

}

.form-error-message {

display: none !important;

}

.form-required {

color: transparent !important;

}

#input_1 {width: 188px !important;}.form-submit-reset{

font-size:0;

}.form-submit-reset:after {

content: "Cancel";

font-size: 12px;

}

CSS code... but I also want to remove the RED border (around the input field) which appears when visitor proceed without providing his/her member Id. 

I want to do it because when this red border appears then the size of the input field shrink but I want that the red border appears with out shrinking the input field size. If it is possible then please help me other wise please provided me the CSS code which make disable the red border.  

ACTUALLY I WANT JUST TO CHANGE THE TEXT BOX (INPUT FIELD) BORDER INTO SIMPLE RED FROM GRAY (WHICH APPEARS NORMALLY) WHEN ANY VISITOR WILL TRY TO PROCEED WITHOUT FILLING MEMBER CODE.

Thanks in advance.....:)

Hi,

Can you please clarify what exactly it was you wanted to achieve on the Textbox field *required indicator?

I checked your jotform http://www.jotform.me/form/43254872974466 and I can already see the changes you described (base on my understanding) happening on the form.

See screenshot below

Is this not what you wanted to achieved? 

Please describe more with details and we will assist you have it on your jotform.

Thanks.

Hi jonathan;

If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field shrink (it will be easy for you if you see the position of the buttons) and the border is not clear... there is little shadow and the border is not just a single red border without shadow.

I want to remove this shadow and want to make my input field FIXED WIDTH (After clicking Proceed, without providing Member ID).

and Thanks a lot for your reply............

Hi jonathan;

Now I am able to solve the problem "the border is not clear... there is little shadow and the border is not just a single red border without shadow."  by injecting this code 

textarea:focus, input:focus{

outline: 0;

}

.form-line-error input:not(#coupon-input), .form-line-error textarea {

border: 1px solid #FF3030;

-moz-box-shadow: 0 0 0px #FF3030;

-webkit-box-shadow: 0 0 0px #FF3030;

box-shadow: 0 0 0px #FF3030;

background-color: #FFFFFF;

}

Please help me for the SHRINK problem.

Hi,

Thank you for the clarification.

Upon closer inspection, I can see now what you meant. 

The Textbox and buttons indeed look likes they shrink from normal size when the required validation is triggered.

Let me check for the right CSS code to prevent this.

I will get back to you quickly with update.

Thanks.

Hi,

Please test this jotform http://www.jotform.me/form/43404363329452

This are the CSS code I used

.form-input .form-error-message, 

.form-input-wide .form-error-message {

visibility:hidden !important;

}

.form-line-error input,

.form-line-error textarea,

.form-validation-error {

border: 1px solid #FF3030 !important;

-moz-box-shadow: 0 0 0 #FF3030 !important;

-webkit-box-shadow: 0 0 0 #FF3030 !important;

box-shadow: 0 0 0 #FF3030 !important;

padding: 0px !important;

}

.form-required {

color: transparent !important;

}

.form-line-error {

background: none repeat scroll 0 0;

}

#input_1{

width: 182px;

height: 21px;

padding: 0px !important;    

}

Tell me if this works or not.

Thanks.

Sorry jonathan....

Your provided CSS code is not working.. it provide same results as before. http://www.jotform.me/form/43254872974466 

Hi,

Please search for the following rule in the jotform's CSS and change 1px to 2px:

.form-line-error input,
.form-line-error textarea,
.form-validation-error {
border: 1px solid #FF3030 !important;
-moz-box-shadow: 0 0 0 #FF3030 !important;
-webkit-box-shadow: 0 0 0 #FF3030 !important;
box-shadow: 0 0 0 #FF3030 !important;
padding: 0 !important;
}

Thanks

Hi again,

first of all thanks to jonathan and abajan for trying to solve my problem and providing me such a beautiful assistance. 

but I have applied all codes but the code provide by jonathan is perfect for Firefox and the code provide by abajan is perfect for Google.

I hope you can understand my problem... now which CSS code should I use.

Hi,

I've tested this to all browsers the CSS provided on my colleagues, it seems they are all working on IE, FF and Chrome.

Sorry, but I need to create a new thread on your new question, related to cross browser and you will be answered here:

http://www.jotform.com/answers/471118

Thanks.

Hi val;

CASE 1: (FIREFOX and IE)

.form-line-error input,
.form-line-error textarea,
.form-validation-error {
border: 2px solid #FF3030 !important;
-moz-box-shadow: 0 0 0 #FF3030 !important;
-webkit-box-shadow: 0 0 0 #FF3030 !important;
box-shadow: 0 0 0 #FF3030 !important;
padding: 0 !important;
}

If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field increases (it will be easy for you if you see the position of the buttons). But this problem is not appears in Google chrome.

CASE 2: (Google)

.form-input .form-error-message, 

.form-input-wide .form-error-message {

visibility:hidden !important;

}

.form-line-error input,

.form-line-error textarea,

.form-validation-error {

border: 1px solid #FF3030 !important;

-moz-box-shadow: 0 0 0 #FF3030 !important;

-webkit-box-shadow: 0 0 0 #FF3030 !important;

box-shadow: 0 0 0 #FF3030 !important;

padding: 0px !important;

}

.form-required {

color: transparent !important;

}

.form-line-error {

background: none repeat scroll 0 0;

}

#input_1{

width: 182px;

height: 21px;

padding: 0px !important;    

}

If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field shrink (it will be easy for you if you see the position of the buttons). But this problem is not appears in FF and IE.

Hi,

I see that my colleague made a separate thread for that other concern, please refer to this link for the updated response regarding that matter. Here's the link: http://www.jotform.com/answers/471118.

Thank you.