Style facebook 'like' button

Question

I'm struggling with this for a while now and without any success. Setting the style with jquery doesn't work, the same with after the facebook iframe. Is there a way to perform this task ?

<iframe src="http://www.facebook.com/plugins/like.php?&amp;href=http%3A%2F%2Fwww.example.com&amp;amp;layout=standard&amp;amp;show_faces=false&amp;amp;width=400&amp;amp;action=like&amp;amp;font=tahoma&amp;amp;colorscheme=light&amp;amp;height=23" 
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:23px;" allowTransparency="false"></iframe>          

<style>
    .connect_widget_not_connected_text, .connect_widget_connected_text {
        color:white;
    }
    .connect_widget_connected_text a {
        color:#3B5998;
    }
</style>

<script type="text/javascript">
    $(function() { 
        $('.connect_widget_not_connected_text').css('color', 'white');
    });
</script>

Answer 1

Try using !important:

color: white !important;

Answer 2

I don't think you can style an iframe content from a parent page in this fashion. You can try adding an id to the iframe and attempting to call it that way but even then I'm not sure it will work.

Answer 3

I'm sure that you can figure out a CSS trick to style the button, but you are violating facebook Terms of Service by doing so. You are REQUIRED to display the like button in one of their official styles.