JSFiddle - React, Tailwind, and code Playground

by rych

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<form class="form-inline">
    <div class="row">
        <div class="col-xs-2">
            <input type="text" class="form-control input input-small" maxlength="3" value="some" />
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control input-medium" value="text" />
        </div>
        <div class="col-xs-2">
            <button class="form-control btn btn-warning" onclick="window.print();return false;">Print me!</button>
        </div>
    </div>
</form>
<p>When the above is printed, there should be NO borders on the inputs.</p>
<p>How to accomplish this?</p>

CSS

@media print {

  button {
      display: none !important;
  }
input, textarea {
    border: 0 !important;
    border-style: none !important;
    border-color: white !important;
    background-color:transparent !important;
    outline: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    outline-offset: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}
    
}