Борьба с input

@НиколайВасильев · Регистрация: 02.12.2015

Author24 — интернет-сервис помощи студентам

Использую

CSS

1
2
3

tbody tr:nth-child(odd) {
        background: #e6e8ea;
    }

В одной колонке стоит input type="text" с id, который начинается "L4" и дальше у каждой строчки свой.

CSS

    input[type="text"]
    {
    font: bold 28px Verdana;
    border: hidden;
    }

Каким-то образом можно добавить background-color для этого input из background-color строки средствами css?

Для этого input нужно шрифт поменять при печати.
Не работает, если поставит так

CSS

input[type="text"]
{
     font-family: Arial;
     font-size: 8px;
     font-weight: normal;
     color: #ED0F13;
     padding: 10px
  }

Только в одной колонке input выводятся на печать, остальные имеют display: none
Этот стиль для печати шрифт уменьшает ТОЛЬКО по id, если точно указываю.
Class срабатывает и меняет цвет.

@Анар · 21.01.2016, 15:16

НиколайВасильев, если вы хотите применить стиль к инпутам, id которых начинается с L4, то используйте такую запись:

CSS

1
2
3

input[id^="L4"] {
...
}

Остальное я не понял. Объясните "на пальцах".

@НиколайВасильев · 21.01.2016, 16:39 **[ТС]**

Анар,
Анар, спасибо! Не видел я такой способ

Вариант input[type="text"] в media="print" с уменьшением шрифта при печати не работает, но цвет меняет.
Если есть id этого input type="text", то меняется размер шрифта и цвет.

HTML5

1	<input type='text' id=L4195 value=1.0 tabindex=2 />

CSS

<style media="print"> 
.nopr {
    display: none
    } 
.tab1p, #year 
{
     font-family: Arial;
     font-size: 8px;
     font-weight: normal;
     color: #ED0F13;
     padding: 10px
       }    
       
input[id^="L4"]
{
    color:#144EEC;
    font-size: 8px;
}
       
tbody td:nth-of-type(2)
{
    display: none;
    } 
               
</style>

@НиколайВасильев · 28.01.2016, 17:34 **[ТС]**

Анар,
ничего не пойму, не получается ничего

Сделал тренировочный html

HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style media="print"> 
.nopr {
    display: none
    } 
.tab1, #L4100
{
     font-family: Arial;
     font-size: 8px;
     font-weight: normal;
     color: #0000FF;
     padding: 10px
 }  
 
/*
input[id^="L4"]
{
    color:#ff0000;
     font-size: 8px;
}
*/
tbody td:nth-of-type(2)
{
    display: none;
    } 
      
thead td:nth-of-type(2)
{
    display: none;
}              
               
</style> 
<style>
    table
    {
        border: 1px #0000FF solid;
        font: bold 28px Verdana;  /* !!!!!!!!! */
        padding: 0px 2px;
        font: bold 28px Verdana; 
        border-collapse:collapse;
        width: 400px;
    }
    
    
    input[type="text"]:focus{
        border: dotted;
        color:#00F;
        }
        
    input[type="text"], select
    {
    font: bold 28px Verdana; 
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    border: hidden;
    width: 120px;
    }
            
</style>
</head>
 
<body>
<table width="100%" border="1" cellspacing="5" cellpadding="3" class="tab1">
<thead>
    <tr>
      <td>a</td>
      <td>b-delete</td>
      <td>c</td>
    </tr>
 
</thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>delete</td>
      <td><input type="text" value="3.8" id=L4100></td>
    </tr>
    <tr>
      <td>2</td>
      <td>delete</td>      
      <td><input type="text" value="3.8" id='L4101'></td>
    </tr>
    <tr>
      <td>3</td>
      <td>delete</td>      
      <td><input type="text" value="3.8" id="L4102"></td>
    </tr>
    
  </tbody>
</table>
 
</body>
</html>

В аттачменте 2 картинки.
Красное 3.8 с input[id^="L4"]
Синее 3.8 в строке №1 с #L4100
Почему-то шрифт по input[id^="L4"] работает только, если нет строки

HTML5

1	font: bold 28px Verdana; /* !!!!!!!!! */

но color:#ff0000; в input[id^="L4"] работает всегда

@Анар · 28.01.2016, 20:26

НиколайВасильев, у вас input[id^="L4"] не работает, потому что он в коде закомментирован.
Всё остальное это вопрос о том, где какие стили перебиваются. Читайте про вес и приоритеты стилей.

@НиколайВасильев · 29.01.2016, 01:58 **[ТС]**

Анар, я специально сделал из input[id^="L4"] комментарий, чтобы скриншот показать.
Насчет приоритетов, я считал, что это разные вещи стиль для экрана и стиль для печати.
Получается нет вариантов

Добавлено через 1 час 8 минут
Анар, нашел решение, спасибо за подсказку. Сверху над таблицей поставил див и заработало

@Анар · 29.01.2016, 03:43

НиколайВасильев, вариантов нет. Стиль в медиазапросе это тот код, который добавляется к основному коду, когда выполняются условия. После срабатывания условия это становится одной таблицей стилей. Размещать эти стили надо после основных.

@НиколайВасильев · 31.01.2016, 15:56 **[ТС]**

Анар, у меня

HTML5

1	<style media="print">

над

HTML5

<style>

и работает, но сейчас поменяю местами. Спасибо!

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	28.01.2016, 20:26	5
	НиколайВасильев, у вас input[id^="L4"] не работает, потому что он в коде закомментирован. Всё остальное это вопрос о том, где какие стили перебиваются. Читайте про вес и приоритеты стилей. 0

@НиколайВасильев -28 / 12 / 2 Регистрация: 02.12.2015 Сообщений: 620
	29.01.2016, 01:58 [ТС]	6
	Анар, я специально сделал из input[id^="L4"] комментарий, чтобы скриншот показать. Насчет приоритетов, я считал, что это разные вещи стиль для экрана и стиль для печати. Получается нет вариантов Добавлено через 1 час 8 минут Анар, нашел решение, спасибо за подсказку. Сверху над таблицей поставил див и заработало 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	29.01.2016, 03:43	7
	НиколайВасильев, вариантов нет. Стиль в медиазапросе это тот код, который добавляется к основному коду, когда выполняются условия. После срабатывания условия это становится одной таблицей стилей. Размещать эти стили надо после основных. 0