テキストエリアのIEでの境界線とエッジ

Question

はさえに示すように、周りのすべての方法は、しかし、エッジとIEでそれが左側と上側（上の暗い境界線を持って接し下の写真）。私は、これはシャドウイングのいくつかの種類であると仮定しています、どのようにこれを除去することができますか？

私はテキストボックスのために使用しているCSSがある...

.textarea-rounded { 
    font-family: 'Inconsolata', monospace; 
    overflow: hidden; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #ecf0f1;; 
    border-radius: 25px; 
    height: 200px; 
    width: 90%; 
    font-size: 18pt; 
    color: #95a5a6; 
    transition: all 0.8s ease-in-out; 
    -webkit-transition: all 0.8s ease-in-out; 
    -moz-transition: all 0.8s ease-in-out; 
    box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
} 

Answer 1

これは、エッジのborder-colorデフォルトによるものです。あなたは明示的に同じクロスブラウザの境界線の色を作るために、このためborder-colorを設定することができます。

.textarea-rounded { 
 
    font-family: 'Inconsolata', monospace; 
 
    overflow: hidden; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    background-color: #ecf0f1; 
 
    border-radius: 25px; 
 
    height: 200px; 
 
    width: 90%; 
 
    font-size: 18pt; 
 
    color: #95a5a6; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
 
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
 
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0); 
 
    border-color: #808080; /* new */ 
 
}

<textarea class="textarea-rounded"></textarea>