Styling input in html

up vote
6
down vote

favorite

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:

enter image description here

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

enter image description here

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

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:

enter image description here

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

enter image description here

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

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:

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

html css input

asked 46 mins ago

blue

442

asked 46 mins ago

blue

442

asked 46 mins ago

blue

442

asked 46 mins ago

blue

442

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Â |Â

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>

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>

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>

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

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

3 Answers
3

active

oldest

votes

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>

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>

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>

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>

answered 30 mins ago

Vikas Jadhav

822512

answered 30 mins ago

Vikas Jadhav

822512

answered 30 mins ago

Vikas Jadhav

822512

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>

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>

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>

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>

answered 10 mins ago

Omi

2,45921434

answered 10 mins ago

Omi

2,45921434

answered 10 mins ago

Omi

2,45921434

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>

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>

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>

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>

answered 4 mins ago

symlink

2,00841831

answered 4 mins ago

symlink

2,00841831

answered 4 mins ago

symlink

2,00841831

answered 4 mins ago

symlink

2,00841831

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky