<h3 dir="auto">Images &amp; references</h3>
<p dir="auto">--&gt; <a href="http://www.material-ui.com/#/components/text-field" rel="nofollow">http://www.material-ui.com/#/components/text-field</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.16.0</li>
<li>Browser: Sadari 10.0</li>
</ul>
<h3 dir="auto">Problem description</h3>
<p dir="auto">A thin border surrounds every input</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6162068/19436814/f1f3b356-947a-11e6-9816-7f00c77aa29f.png"><img width="834" alt="screen shot 2016-10-17 at 14 59 37" src="https://cloud.githubusercontent.com/assets/6162068/19436814/f1f3b356-947a-11e6-9816-7f00c77aa29f.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6162068/19436811/f1efb3c8-947a-11e6-9c22-293fe338d754.png"><img width="174" alt="screen shot 2016-10-17 at 14 59 17" src="https://cloud.githubusercontent.com/assets/6162068/19436811/f1efb3c8-947a-11e6-9c22-293fe338d754.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6162068/19436812/f1f09d2e-947a-11e6-8988-87dc94d3d5af.png"><img width="508" alt="screen shot 2016-10-17 at 14 59 03" src="https://cloud.githubusercontent.com/assets/6162068/19436812/f1f09d2e-947a-11e6-8988-87dc94d3d5af.png" style="max-width: 100%;"></a></p>
<p dir="auto">Here, the first input is not a textarea. I think it might have something to do with it.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6162068/19436813/f1f155ca-947a-11e6-9219-88a3b5dc5e4d.png"><img width="501" alt="screen shot 2016-10-17 at 15 02 58" src="https://cloud.githubusercontent.com/assets/6162068/19436813/f1f155ca-947a-11e6-9219-88a3b5dc5e4d.png" style="max-width: 100%;"></a></p>
<p dir="auto">I've also noticed that if I change in the browser <code class="notranslate">-webkit-appearance: textfield</code> to <code class="notranslate">-webkit-appearance: none</code> on the <code class="notranslate">&lt;div/&gt;</code> wrapping the text area, the border dissappear.</p>
<p dir="auto">The hard part is to make this happen with the code. I wasn't able so far to do this. Someone in EnhancedTextarea overwrites my styles ;(</p>
<p dir="auto">Here is the input:<br>
<code class="notranslate">&lt;TextField inputStyle={WebkitAppearance: 'none', color: 'blue'} multiLine={true} /&gt;</code></p>
<p dir="auto">Here is the real effect:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6162068/19437527/6b4aef5a-947e-11e6-80b3-7fa44c6aa55e.png"><img width="893" alt="screen shot 2016-10-17 at 15 24 51" src="https://cloud.githubusercontent.com/assets/6162068/19437527/6b4aef5a-947e-11e6-80b3-7fa44c6aa55e.png" style="max-width: 100%;"></a></p>
<p dir="auto">Notice that the color changes to <code class="notranslate">blue</code>, but <code class="notranslate">-webkit-appearance</code> doesn't.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: ^0.16.0</li>
<li>React: ^15.3.2</li>
<li>Browser: Safari 10.0</li>
</ul>