add custom CSS in functions.php

Hi.
I am trying to write my first WordPress Blog Theme.

Everything is going well, but now i have a problem which i can’t fix. I thought maybe there is some workaround and someone here could point me in the right direction.

So, what i am trying to do now is adding some customizing functionalities, like choosing colors,…, (in the admin area).
I have added a new section to the Dashboard – Appearence – Customize.
There the user can choose a custom color.
I am then adding this color to css inside my function.php

Everything works fine (the colors update and all), until i try to use some pseudo selectors. When i try to style things like “#searchform ::-webkit-input-placeholder” the custom colors stop working.
(i have the right selector, because in my original stylesheet everything is working).
So, here is what i have now:

<style type="text/css">
		a,
		a:visited,
		.siteheader .container h1.sitename a,
		.toparea .sitemoto h5,
		.poststripes .container .posttitle h2:hover a,
		.ajax-load-more-wrap #load-more,
		.search-box #searchform input[type="text"],
		.search-box #searchform ::-webkit-input-placeholder,
		.search-box #searchform :-moz-placeholder,
		.search-box #searchform ::-moz-placeholder,
		.search-box #searchform :-ms-input-placeholder,
		.search-box #searchform input[type="submit"],
		.single .container .commentssection form #submit,
		.single .container .commentssection .bethefirst,
		.archivebanner h2,
		.nocontentbanner h2
		{
			color: <?php echo get_theme_mod('satus_highlight_color') ?>;
		}
</style>

this code isn’t working.
If i take away the

.search-box #searchform ::-webkit-input-placeholder,
.search-box #searchform :-moz-placeholder,
.search-box #searchform ::-moz-placeholder,
.search-box #searchform :-ms-input-placeholder,

then everything works again.

Why is this happening? Is there a way i could make this work?

Thank you for your help! =)