Bootstrap select поле ввода print

Question

Я пытаюсь распечатать мою страницу, которую я создал с помощью бутстрапа. И на странице у меня есть выбор управления вводом.

Когда он напечатан ... он имеет маленький треугольник, который подразумевает, что это поле является полем выбора. Но я не хочу, чтобы эта информация была напечатана.

Кто-нибудь знает, как удалить этот штрих от печати? This one

А вот как мой код выглядит:

<div class="col-sm-6 col-xs-12"> 
         <span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton--> 
         <div class="input-group"> 
          <select name="RAdiagnosisSelect" 
            class="form-control" 
            multiple-limit="1" 
            ng-model="visit.diagnosisId" 
            ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2" 
            required> 
           <option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option> 
           <option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option> 
           <!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>--> 
          </select> 
         </div> 
        </div> 

И я использую обычную библиотеку печати:

<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"> 

Answer 1

Чтобы быть честным, я сделал это по-другому. Я разделил видимую часть и часть печати.

И получил один код от показа пользовательского контента, второй - от печати.

Он работал хорошо, поэтому у меня нет проблем с форматированием.

Итак, ответ: используйте скрытую печать и видимую печать :).

Answer 2

Написать этот стиль

<style> 
@media print { 
.caret {display:none;} 
} 
</style> 

Answer 3

Вы можете скрыть за другим элементом, например: до

вот fiddle

Оберните ваш выбор с DIV:

.input-group { 
 
    position: relative; 
 
} 
 

 
.input-group:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 29px; 
 
    height: calc(100% - 2px); 
 
    background: white; 
 
    top:1px; 
 
    right:1px; 
 
    z-index: 1; 
 
} 
 

 
.select-wrapper { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
.select { 
 
    border: 1px solid gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-6 col-xs-12"> 
 
         <span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton--> 
 
         <div class="input-group"> 
 
          <div class="select-wrapper"> 
 
          <select name="RAdiagnosisSelect" 
 
            class="form-control" 
 
            multiple-limit="1" 
 
            ng-model="visit.diagnosisId" 
 
            ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2" 
 
            required> 
 
           <option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option> 
 
           <option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option> 
 
           <!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>--> 
 
          </select> 
 
          </div> 
 
         </div> 
 
        </div>