CSS3 Warum Eingabe [Typ = Text] 's Grenze links und oben sind schwarz?

Question

Meine Frage ist ziemlich einfach. Wie stelle ich die Grenze links und oben auf die gewünschte Farbe ein?

input.comment-input { 
 
    width: 60%; 
 
    border-color: #2bb6c1; 
 
    border-width: 1px; 
 
} 
 

 
input.comment-input, 
 
button.btn-comment { 
 
    font-size: inherit; 
 
    padding: 0.2em; 
 
    margin: 0.1em 0.2em; 
 
    -moz-box-sizing: content-box; 
 
    -webkit-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 

 
button.btn-comment { 
 
    width: 50px; 
 
    text-align: center; 
 
    color: #2bb6c1; 
 
    background-color: #fff; 
 
    border: dashed 1px #2bb6c1; 
 
    font-size: inherit; 
 
}

<input type="text" class="comment-input"> 
 
<button type="button" class="btn-comment">input</button>

Hier ist die Js-Fiddle

Answer 1

Verwendung border-left und border-top Eigenschaft für dieses

border-left:1px solid red; //set you want color 
border-top:1px solid red; //set you want color 

input.comment-input { 
 
    width: 60%; 
 
    border-color: #2bb6c1; 
 
    border-width: 1px; 
 
    border-left: 1px solid red; 
 
    border-top: 1px solid red; 
 
} 
 

 
input.comment-input, 
 
button.btn-comment { 
 
    font-size: inherit; 
 
    padding: 0.2em; 
 
    margin: 0.1em 0.2em; 
 
    -moz-box-sizing: content-box; 
 
    -webkit-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 

 
button.btn-comment { 
 
    width: 50px; 
 
    text-align: center; 
 
    color: #2bb6c1; 
 
    background-color: #fff; 
 
    border: dashed 1px #2bb6c1; 
 
    font-size: inherit; 
 
}

<input type="text" class="comment-input"> 
 
<button type="button" class="btn-comment">input</button>

Answer 2

Vermissen Sie border-style?

input.comment-input { 
    width: 60%; 
    border-color: #2bb6c1; 
    border-width: 1px; 
    /*border-style*/ 
    border-style: dashed 
}