Where to change Remember Me? check box color?

[durruti]

Where can I look to in order to change the Remember Me? check box; border color, background color and the V check color?

[RickyH]

Looks like some css work on that one!

This may help, i'm not sure.

http://www.paulund.co.uk/style-checkboxes-with-css

[durruti]

That's nice but unfortunately it is too complicated for me. For now, I just wish to change the coloring but don't know which template I must look for and which lines.

[tbworld]

Originally Posted by durruti

That's nice but unfortunately it is too complicated for me. For now, I just wish to change the coloring but don't know which template I must look for and which lines.

The square checkbox you have limited control on the coloring. Depends on the browser, but if you are talking about the background and the foregound color you can modify that quite easily.

Add this to the bottom of your additional.css template

   
.toplinks .remember {
     color: yellow;
     background: black;
     border: 1px solid orange;
     margin: -3.33333px 0 0 20px;  /* Changes current position and width */
}

You will have to fool around with the CSS for your style.


If you want more advance topics:
Search:
-moz-appearance
webkit-appearance
input[type="checkbox"]

[durruti]

@tbworld



Tried it on default skin, see above.
Apology if the OP is not clear enough (I just realize that I didn't red circle the part that I wish to change on the OP image).

I wish to change the color for the border, background and the V check.

Edit:

<- this is what I wish to change (only color).

[tbworld]

Originally Posted by durruti

@tbworld



<- this is what I wish to change (only color).

That is tricky, on my last post I gave you some search topics. You need to start there and understand that the appearance of the checkbox is browser and browser version related. That doesn't mean you cannot change some attributes. Every browser handles it differently.

Do a bit a of searching and learning and then if you need a hand, yell back.

Example of changing the scale of the checkbox. It is not perfect. but it works in
most browsers.

input[type=checkbox] {
    -ms-transform:  scale(2); 
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
        padding: 10px;
  }

There are all sorts of methods for creating new check-boxes and radio-buttons from using images, CSS transforms, canvas... but none of these are super simple methods.