[HELP] Change Form input styles

[nosnevetzy]

Hello. I'm using PS 1.6.14 version. I want to change the styles of input forms such as textbox, textarea, select input type, radio buttons, check box, etc. I tried to change using some css codes but nothing happens. I can't even change the height and width of checkbox, radio buttons and select input type.  it seems like there's some javascript that prevents the css I've added to work. 

 

I searched the whole prestashop folder and I found this file, specifically an image "sprite.png". You can check that too. I think there's something going on with that image. Please help. Thanks! 

[nosnevetzy]

Anyone? Please?

[nosnevetzy]

Up. Please help!

[nosnevetzy]

No one answer my question... Please help!

[Programmers Direct]

I am currently working on this issue as well. If I find a solution I will post it here.

[Programmers Direct]

Please go to and edit the uniform.default.css found in your theme directory the exact file path is below with the area in which I changed to make the checkbox border to turn to red. However I believe you could copy and paste css things from here into the global file and it should override this files css styling, but I am not completely sure, but is easy to test.

 

/public_html/themes/SSNE/css/autoload/uniform.default.css

 

The area I changed is specified below.

 

I changed the below part of the page

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
  background-image: url("../../img/jquery/uniform/sprite.png");
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  }

To this part below.

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
  background-image: url("../../img/jquery/uniform/sprite.png");
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  border: 1px solid #ff0000;

  }

Adding border: 1px solid #ff0000; to the end made my checkbox border on opc checkout to turn red and I am sure all others will too.

 

EDIT ::  I noticed this made a lot of things have the border so I changed the edit to what you see below to only make checkboxes have a red border. This also lets you see how you can individually change the input.

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
background-image: url("../../img/jquery/uniform/sprite.png");
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
}
div.checker span{
border: 1px solid #ff0000;
}

:: END EDIT

 

 

 

 

I hope this helps.

William Williamson

Shop Save N Earn - www.shopsavenearn.com

Programmers Direct - www.design.shopsavenearn.com

Edited December 4, 2015 by ShopSaveNEarn (see edit history)

[nosnevetzy]

Please go to and edit the uniform.default.css found in your theme directory the exact file path is below with the area in which I changed to make the checkbox border to turn to red. However I believe you could copy and paste css things from here into the global file and it should override this files css styling, but I am not completely sure, but is easy to test.

 

/public_html/themes/SSNE/css/autoload/uniform.default.css

 

The area I changed is specified below.

 

I changed the below part of the page

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
  background-image: url("../../img/jquery/uniform/sprite.png");
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  }

To this part below.

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
  background-image: url("../../img/jquery/uniform/sprite.png");
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  border: 1px solid #ff0000;

  }

Adding border: 1px solid #ff0000; to the end made my checkbox border on opc checkout to turn red and I am sure all others will too.

 

EDIT ::  I noticed this made a lot of things have the border so I changed the edit to what you see below to only make checkboxes have a red border. This also lets you see how you can individually change the input.

div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {
background-image: url("../../img/jquery/uniform/sprite.png");
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
}
div.checker span{
border: 1px solid #ff0000;
}

:: END EDIT

 

 

 

 

I hope this helps.

William Williamson

Shop Save N Earn - www.shopsavenearn.com

Programmers Direct - www.design.shopsavenearn.com

I'll try this one! Thank you very much!

[Programmers Direct]

Your quite welcome. Let me know if it works for you.

[nosnevetzy]

Hello! Thanks for the answer! What I do is just I remove all the CSS codes on the uniform.default.css and I insert my CSS codes. Thanks again!