css - HTML input text: increase text size without changin input size -


I am using a 4 digit password; The points representing each character are very small; I would like to increase font size; But I want to change the input size.

I have it: 

  & lt; Input class = "pin_code" type = "password" maxlength = "4" />   
 If I  
  & lt; Input class = "Pincode" type = "password" maximum number = "4" style = "font-size: 30px add" />   
 Then the input also increases the size; How can I make text / dots only to get bigger?  
 Dots bigger more space than me  
 I added  
  & lt; Input class = "pincode" type = "password" maxlength = "4" style = "font-size: 30px; height: 24px" />   
 And now I get this:  
 image Enter I believe here that you can not achieve easily.  
 To solve this, I think we have to close the top and bottom with the same distance and just show the middle part (with the text line). To turn it off, we need an envelope around the input field, keep the input field appropriately and set the  overflow: hidden  for the wrapper Here are the code details: < / P> 
  HTML :  
  & lt; span class = 'input-clipper' & gt; & Lt; Input class = "pincode" type = "password" maxlength = "4" /> & Lt; / Span & gt;   
  CSS :  
  .pin_code {font-size: 40px; Status: Completed; Width: 100%; Top: 50%; -webkit-transform: translateY (-50%); Left: 0; Profile: None; } Span.input-clipper {display: inline-block; Status: Relative; Height: 20px; Width: 200px; Hidden flurry; Border: 1 px solid black; }  Note  Note: To style the border, you should instead limit the cover of the shell ( .input-clipper ) in style have to keep. You set the size of the cover instead of setting the input field size (as before). Test the demo using webcat-based browsers (Chrome, Opera) because I used the prefix for the  -Vibit -   transform  property.  
  
  Update : The above demo indicates a problem that fills the height of the carat. In height of input to reduce the carat height, we can see the : Before  and :  you can use a small move after pseudo-elements.  
  Balance Issue : You can not style the input range in the : Focus  position with CSS only, of course if you use Javascript This can be style.  
 I think there is a high attenuation that we have a better solution related to font icons or special characters ... but I am not good at that part. Hope someone will post it here.

Comments

Post a Comment

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

I get the error every time, I try to compile. I'm not sure why anyone can help is? I'm new to verilog. Module D_FF (clerk, d, reset_n, q); Input D, Clack, reset_en; Output Q; reg Q; lab4_gdl f1 (.lk (~ clk), d (d), .q.m (qm)); lab4_GDL f2 (.Clk (Clk), D (QM), .Q (Q)); Always start at @ (posedge clk, neggeous reset_n) (Reset_n == 0) Q & lt; = 0; Other questions & lt; = D; Edit End: The problem is what we are asking to do: In this section, you apply the memory / registration circuit on the AlterEdie 2 board. will do. The circuit has the following specifications: The present value of swift SW15-0 on the D2 board should be shown in four hexadecimal four sections of HEX3-0. This part of the circuit will be combination logic. To use an active-less asynchronous reset and KEY1 to use KEY0 as the clock input, you must store SW15-0in in a 16-bit register in the value The register should be enabled to have a 16-bit positive edge, which uses the embedded D flip-flo
Read more

jasper reports - How to center align barcode using jasperreports and barcode4j -

I use iReport 5.5.0 . How to align a barcode component to the center The relevant piece of my jrxml is below & Lt; JR: Code 128 xmlns: JR = "http://jasperreports.sourceforge.net/jasperreports/components" xsi: schemaLocation = "http://jasperreports.sourceforge.net/jasperreports/components http: //jasperreports.sourceforge Purge / xsd / components.xsd "textPosition =" bottom "& gt; & Lt; Jr: codeExpression & gt; & Lt; [CDATA [$ F {number}]] & gt; & Lt; / Jr: codeExpression & gt; & Lt; / Jr: Code 128 & gt; & Lt; / componentElement & gt; "Text" itemprop = "text"> Create a style after this, it is called "barcode", like: & lt; Style name = "barcode" fontName = "Helvetica" fONTSIZE = "10" hAlign = "center" valign = "center" /> and set the property of your barcode element to "barcode".
Read more

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -

In brief, the wrapper module is inserted during posting and the status of an entry is changed to 'modified' . Before changing the state, the state is set to 'separate', but calling attachments () causes the same error to be thrown away. I am using EF 6. Model / wrapper class public class avi model {public A is a {get; Set; } Public listing & lt; B & gt; B {received; Set; } Public cc {receipt; Set; }} Administrator edit public functioning (int? id) {if (id == null) {new HttpStatusCodeResult (HttpStatusCode.BadRequest); } If (! Conveyor Access (id.Value)) new HTTPTitus code result (HTTP status code. Forbidden); Var aViewModel = new AViewModel (); aViewModel.A = db.As.Find (id); If (aViewModel.Receipt == zero) {return HttpNotFound (); } aViewModel.b = db.Bs.Where (x => x.aid == id.Value) .Oolist (); AViewModel.Vendor = db.Cs.Where (x => x.cid == aViewModel.a.cID) .FirstOrDefault (); See Return (aViewModel); } [HTPFost] [Valid AntitiferousTeacon
Read more