Checkbox inline mit Text - JS-Problem?

Question

Ich lerne gerade, wie man programmiert, und habe versucht, das Design eines Formulars zu beenden. Ich habe mir alle vorherigen Fragen angeschaut, aber keine der Lösungen scheint zu funktionieren: S. Im Folgenden sind die zwei Dinge, die ich beheben möchte:

1. Ändern Sie die Textfarbe und Rahmen des Dropdown-Menüs.
2. Richten Sie das Kontrollkästchen und die Beschriftung so aus, dass sie sich in derselben Zeile befinden.

Der Code kann hier gesehen werden: http://codepen.io/jbender90/pen/rebbEB

Hier ist meine aktuelle Setup ist für die Checkbox und Label:

<div id="menu"> 
    <select class="js-example-basic-single" style="width: 100%;"> 

#menu{ 
    font-family: montserrat, arial, verdana; 
    font-size:14px; 
    border: #2C3E50; 
    color:#2C3E50; 
    text-align: left; 
    height: 20px; 
} 

Hier ist meine aktuelle Setup ist für die Checkbox und Label:

<div class="inline-field"> 
    <input type="checkbox" id="checkbox"> 
    <label for="checkbox">Remember me</label> 
</div> 

.inline-field input, 
.inline-field label { 
    display: inline-block !important; 
    float:left; 
    margin-bottom: 0; /* I added this after I posted my reply */ 
    vertical-align: middle; /* Fixes any weird issues in Firefox and IE */ 
    z-index:1; 
} 

Jeder Rat wäre mit offenen Armen willkommen!

Cheers,

Johan

Answer 1

zu tun # 1 Sie nur die Drop-Down-Klassen Ziel haben, um die Eigenschaften zu modifizieren, um die Drop-Down-Grenze Farbe und Text, den Sie diese beiden Selektorklassen haben würde:

Dies funktioniert möglicherweise nicht in Ihrem Code Stift, weil Sie die Auswahl 2 CSS wieder in den Körper enthalten, die überschreiben würde, was Sie in Ihrer style.css definieren.

Wie bei # 2 scheint etwas zu sein, das die Breite der Checkbox auf 100% setzt und somit das Label nach unten drückt. Eine weitere Änderung, die ich vorgenommen habe, war, die Eingabe in das Etikett zu schreiben. Die html würde wie folgt aussehen:

<label for="checkbox"><input type="checkbox" id="checkbox"> This text should be aligned with the checkbox</label> 

die Breite außer Kraft zu setzen:

#msform input { 
    width: auto; 
} 

Hier ist das Arbeitsbeispiel.

http://codepen.io/anon/pen/vGMqLv