Styling input in html

Clash Royale CLAN TAG#URR8PPP

up vote
6
down vote

favorite

1

I have an input type password that only allow 6 digit number like this:

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

it will show like this:

how can i style it so it can look like this:

html css input

share

asked 46 mins ago

blue

442

• 
  
  
  

  
  

  
  
  
  
  
  

  
  We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
  – Pankaj Aagjal
  14 mins ago
  

  
  
  
  

add a comment | 

up vote
6
down vote

favorite

1

I have an input type password that only allow 6 digit number like this:

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

it will show like this:

how can i style it so it can look like this:

html css input

share

asked 46 mins ago

blue

442

• 
  
  
  

  
  

  
  
  
  
  
  

  
  We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
  – Pankaj Aagjal
  14 mins ago
  

  
  
  
  

add a comment | 

up vote
6
down vote

favorite

1

up vote
6
down vote

favorite

1

1

I have an input type password that only allow 6 digit number like this:

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

it will show like this:

how can i style it so it can look like this:

html css input

share

asked 46 mins ago

blue

442

I have an input type password that only allow 6 digit number like this:

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

it will show like this:

how can i style it so it can look like this:

html css input

html css input

share

asked 46 mins ago

blue

442

share

asked 46 mins ago

blue

442

share

share

asked 46 mins ago

blue

442

asked 46 mins ago

blue

442

asked 46 mins ago

blue

442

442

• 
  
  
  

  
  

  
  
  
  
  
  

  
  We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
  – Pankaj Aagjal
  14 mins ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
  – Pankaj Aagjal
  14 mins ago
  

  
  
  
  

We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
– Pankaj Aagjal
14 mins ago

We can't change the password masking character in input type password. We can do it for input type text but it has a security risk.
– Pankaj Aagjal
14 mins ago

add a comment | 

3 Answers
3

active

oldest

votes

up vote
4
down vote

try this:

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

add a comment | 

up vote
2
down vote

User border style as dashed with letter spacing.

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share|improve this answer

answered 10 mins ago

Omi

2,45921434

add a comment | 

up vote
1
down vote

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share

answered 4 mins ago

symlink

2,00841831

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52885890%2fstyling-input-in-html%23new-answer', 'question_page');

);

Post as a guest

Name Email

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
4
down vote

try this:

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

add a comment | 

up vote
4
down vote

try this:

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

add a comment | 

up vote
4
down vote

up vote
4
down vote

try this:

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

try this:

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

input 
 padding-left: 15px;
 letter-spacing: 45px;
 border: 0;
 background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
 background-position: bottom;
 background-size: 50px 1px;
 background-repeat: repeat-x;
 background-position-x: 35px;
 width: 280px;

 <fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
 maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
 </fieldset>

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

share|improve this answer

share|improve this answer

answered 30 mins ago

Vikas Jadhav

822512

answered 30 mins ago

Vikas Jadhav

822512

answered 30 mins ago

Vikas Jadhav

822512

822512

add a comment | 

add a comment | 

up vote
2
down vote

User border style as dashed with letter spacing.

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share|improve this answer

answered 10 mins ago

Omi

2,45921434

add a comment | 

up vote
2
down vote

User border style as dashed with letter spacing.

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share|improve this answer

answered 10 mins ago

Omi

2,45921434

add a comment | 

up vote
2
down vote

up vote
2
down vote

User border style as dashed with letter spacing.

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share|improve this answer

answered 10 mins ago

Omi

2,45921434

User border style as dashed with letter spacing.

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

input 
 border: none;
 border-bottom: 4px dashed #000;
 letter-spacing: 8px;
 padding 5px 0px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share|improve this answer

answered 10 mins ago

Omi

2,45921434

share|improve this answer

share|improve this answer

answered 10 mins ago

Omi

2,45921434

answered 10 mins ago

Omi

2,45921434

answered 10 mins ago

Omi

2,45921434

2,45921434

add a comment | 

add a comment | 

up vote
1
down vote

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share

answered 4 mins ago

symlink

2,00841831

add a comment | 

up vote
1
down vote

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share

answered 4 mins ago

symlink

2,00841831

add a comment | 

up vote
1
down vote

up vote
1
down vote

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share

answered 4 mins ago

symlink

2,00841831

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

label 
 display: block;


input#password-input 
 position: absolute;
 z-index: 22;
 border: none;
 background: transparent;
 width: 164px;
 padding-left: 11px;
 letter-spacing: 21px;


input#password-input:focus 
 outline: none;


span.hint 
 display: block;
 margin-top: 23px;


fieldset 
 position: relative;


fieldset::after 
 content: "___ ___ ___ ___ ___ ___";
 display: block;
 position: absolute;
 top: 26px;

<fieldset>
 <label for="password-input">Enter New Pin</label>
 <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
 <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

share

answered 4 mins ago

symlink

2,00841831

share

share

answered 4 mins ago

symlink

2,00841831

answered 4 mins ago

symlink

2,00841831

answered 4 mins ago

symlink

2,00841831

2,00841831

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52885890%2fstyling-input-in-html%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email