How to increase the font and cursor of the input="text" bar according to the desired size?

Navigation
0

I applied a padding of 30px and the cursor and the font of the input="text" did not increase as the internal spacing applied, is there any possibility of increasing the size as desired? I tried to apply a font-size more! as the font increases the blessed bar also increases its degree, wanted to increase the font and the bar is the size that is there, link 

table{ border-spacing:0px; border:1px solid #000; 
}
td{ border:1px solid #000; padding:30px;
}
tr{
}
td.spc{ position:absolute; left:535px;
}
td.sp{ position:relative; width:800px;
}
td.nm{ position:absolute; left:1050px; border-right:none;
}
td#br{ position: absolute; z-index:1; border:none;  
}
input[type=text]{-webkit-appearance:none; outline-color:#F00;padding:30px; border:2px solid #03F;
}
<div class="menu">

<table>
  <tr><td>BLOCO-1</td><td>SERVIÇO</td><td id="br"><input type="text"/></td><td class="spc">Section</td><td class="nm">1</td><td class="sp"></td></tr>
  <tr><td>BLOCO-2</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">2</td><td class="sp"></td></tr>
  <tr><td>BLOCO-3</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">3</td><td class="sp"></td></tr>
  <tr><td>BLOCO-4</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">4</td><td class="sp"></td></tr>
</table>

</div>
    
asked by anonymous 25.05.2018 / 00:03

2 answers

1

table{ border-spacing:0px; border:1px solid #000; 
}
td{ border:1px solid #000; padding:30px;
}
tr{
}
td.spc{ position:absolute; left:535px;
}
td.sp{ position:relative; width:800px;
}
td.nm{ position:absolute; left:1050px; border-right:none;
}
td#br{ position: absolute; z-index:1; border:none;  
}
input[type=text]{-webkit-appearance:none; outline-color:#F00;padding:30px;border:2px solid #03F;box-sizing: border-box;font-size:50px;max-width:240px
}
<div class="menu">

<table>
  <tr><td>BLOCO-1</td><td>SERVIÇO</td><td id="br"><input type="text"/></td><td class="spc">Section</td><td class="nm">1</td><td class="sp"></td></tr>
  <tr><td>BLOCO-2</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">2</td><td class="sp"></td></tr>
  <tr><td>BLOCO-3</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">3</td><td class="sp"></td></tr>
  <tr><td>BLOCO-4</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">4</td><td class="sp"></td></tr>
</table>

</div>

Add a max-width and change the box-sizing

    
25.05.2018 / 00:15
1

Set a height fixed for the input: 

height: 30px

After this set the font-size : 

font-size: 40px;

Your own code: 

table{ border-spacing:0px; border:1px solid #000; 
}
td{ border:1px solid #000; padding:30px;
}
tr{
}
td.spc{ position:absolute; left:535px;
}
td.sp{ position:relative; width:800px;
}
td.nm{ position:absolute; left:1050px; border-right:none;
}
td#br{ position: absolute; z-index:1; border:none;  
}
input[type=text]{-webkit-appearance:none; outline-color:#F00;padding:30px; border:2px solid #03F;height:25px !important;font-size:40px;
}
<div class="menu">

<table>
  <tr><td>BLOCO-1</td><td>SERVIÇO</td><td id="br"><input type="text"/></td><td class="spc">Section</td><td class="nm">1</td><td class="sp"></td></tr>
  <tr><td>BLOCO-2</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">2</td><td class="sp"></td></tr>
  <tr><td>BLOCO-3</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">3</td><td class="sp"></td></tr>
  <tr><td>BLOCO-4</td><td>SERVIÇO</td><td class="spc">Section</td><td class="nm">4</td><td class="sp"></td></tr>
</table>

</div>

PS: font-size will also modify width , consider setting width fixed or percentage, eg: 

width:200px;
    
25.05.2018 / 00:12
What's the difference in assigning an already started array to an uninitiated array? Delete repeated elements of a vector in C