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

Asked

Viewed 900 times

0

I applied a 30px padding and the cursor and input source="text" did not increase as the internal spacing applied, is there any possibility of increasing the size as desired?? I tried applying a font-size 'but! as the font increases the blessed bar also increases its degree, wanted to increase the font and the bar stay the size that is there, https://i.stack.Imgur.com/Om6ri.png

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>

2 answers

1

Define a height fixed to the input:

height: 30px

After that define 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: the font-size will also modify the width, consider defining a width fixed or percentage, example:

width:200px;

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.