CSS3为什么输入[type = text]的边框左边和上边都显示黑色？

Question

我的问题很简单。如何将边框左侧和顶部设置为我想要的颜色？

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>

这里是Js-Fiddle

Answer 1

使用border-left和border-top属性用于此

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

你是否缺少border-style？

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