Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 16, 2016 at 10:44 am #725237
    Amigs

    Hello Support Team

    I try to change the background color of check box from blue to other color (if it checkt), but if change the css (see below) it have no impact:

    *::-moz-selection {
    background-color: #a77e2d;
    color: #ffffff;
    }

    • This topic was modified 8 years ago by Amigs.
    December 19, 2016 at 11:56 pm #726349
    Nikko

    Hey Pascal,

    Try using this code instead:

    #top input[type=checkbox]:checked {
  background-color: #a77e2d !important;
  color: #ffffff !important;
}

    If that doesn’t work, kindly post a link to your contact form.

    Best regards,
    Nikko

    December 20, 2016 at 11:53 am #726515
    Amigs

    Hey Nikko

    Unforgentli the chance has no impact, the same as my changecse, the checkt box is still blue!:

    Link to screenshoot: https://www.dropbox.com/s/33y19l0jsbvw123/Screenshot%202016-12-20%2010.51.52.png?dl=0

    You can test by your self, but you have to put some product to the cart and go to the checkout: https://www.atcarolines.ch/checkout/

    All the best,
    Pascal

    December 23, 2016 at 12:34 am #727729
    Nikko

    Hi,

    Yes, I have tested it and it doesn’t work, I’ll try to help you with it but I might need some time to do this.

    Best regards,
    Nikko

    December 23, 2016 at 10:31 am #727864
    Amigs

    Hi Nikko

    Ok, i will wait ;-)

    All the best,
    Pascal

    December 26, 2016 at 6:32 pm #728238
    Yigit

    Hi,

    I added following to Design > CSS Bearbeiten

    input[type='checkbox'] {
	margin-top: -30px;
}

input[type='checkbox'] {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
	width: 13px;
	height: 13px;
	margin: 0;
	margin-right: 1px;
	display: block;
	float: left;
	position: relative;
	cursor: pointer;
}

input[type='checkbox']:after {
	content: "";
	vertical-align: middle;
	text-align: center;
	line-height: 13px;
	position: absolute;
	cursor: pointer;
	height: 13px;
	width: 13px;
	left: 0;
	top: 0;
	font-size: 10px;
	-webkit-box-shadow: inset 0 1px 1px #5F95FC, 0 1px 0 #5F95FC;
	-moz-box-shadow: inset 0 1px 1px #5F95FC, 0 1px 0 #5F95FC;
	box-shadow: inset 0 1px 1px #5F95FC, 0 1px 0 #5F95FC;
	background: #5F95FC;
}

input[type='checkbox']:hover:after, input[type='checkbox']:checked:hover:after {
	background: #5F95FC;
	content: '\2714';
	color: #fff;
}

input[type='checkbox']:checked:after {
	background: #5F95FC;
	content: '\2714';
	color: #fff;
}

    Please review your website now

    Enjoy your holidays!

    Best regards,
    Yigit

    January 9, 2017 at 10:56 am #731044
    Amigs

    Hi Yigit

    Hmm, it is still in blue :-(

    All the best,
    Pascal

    January 12, 2017 at 5:45 am #732462
    Ismael

    Hi,

    I would like to login to the site but the url redirects to the home page. Please add this css code to change the background and check color if the checkbox is active or checked.

    input[type=checkbox]:checked:after {
    background: green !important;
    color: black !important;
}

    NOTE: Add it below the previous css codes.

    Best regards,
    Ismael

    January 16, 2017 at 5:44 pm #734249
    Amigs

    Hi Ismael

    Hmm, still not working, it appears in blue and if i activate i green, but it should apear from starting in specfic color, (the same as here, see Notify me of follow-up replies via email)

    All the best, Pascal

    January 18, 2017 at 11:16 am #735241
    Nikko

    Hi Pascal,

    I have changed the background colors from #5F95FC to green. Let us know if it’s good on your end.

    Best regards,
    Nikko

    January 18, 2017 at 11:38 am #735253
    Amigs

    Hi Nikko

    Great on step forward, so to witch color you can change the boxes? just green, blue ………

    All the best,
    Pascal

    January 19, 2017 at 7:12 am #735704
    Nikko

    Hi,

    Yes, as long as the color name is supported it should be changed easily, you can see here the accepted values: http://www.quackit.com/css/css_color_codes.cfm

    Regards,
    Nikko

    February 1, 2017 at 11:22 am #741146
    Amigs

    Hi Nikko

    Now it works 90% but we still have blue border on the top and also at the botton, as you can see at https://www.atcarolines.ch/checkout/ it you put some product in the cart.

    All the best.

    February 3, 2017 at 12:06 am #742102
    Nikko

    Hi,

    Try adding this css code:

    input[type='checkbox']:after {
    box-shadow: none !important;
}

    Hope this helps.

    Best regards,
    Nikko

    February 9, 2017 at 4:46 pm #744873
    Amigs

    Hallo Nikko

    Now it work. 1000s Thanks.

    All the best,
    Pascal

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Checkbox Background Color change’ is closed to new replies.