I have an app, that requires an SMS code for login. I've added a technically identical example below.
For accessibility reasons, I want this SMS code thing to be a single <input> in the HTML. I also would be happy to delete the code that handles the transitions between the digits, and copy~paste.
Is it possible to implement using a single input? If so how?
Drawing DIVs right over the input, is a solution I'd like to avoid, for responsiveness sake.
The app is actually using react and MUI, but I could adapt any HTML-CSS solution.
.container {
margin: 50px;
background: #fff url(https://i.ibb.co/x7SpXXZ/squares4.png) 12px 2px no-repeat;
width: 160px;
overflow: hidden;
}
.container input {
letter-spacing: 20px;
font-family: "Courier New", Courier, monospace;
font-size: 150%;
font-weight: bold;
height: 30px;
padding-left: 20px;
padding-right: 20px;
width: 160px;
border: 0;
background-color: transparent;
outline: 0;
}
<div class="container">
<input type="text" value="1234" maxlength="4">
</div>
Related
I got 2 forms at my webpage and they are wrongly aligned on iOS devices (iPhone, iPad Safari). On computers it displays correctly (Windows and actually even Mac with Safari) but on mobile devices for some reason the inputs are not centered. Interesting thing is that it's not the whole form but just the input element.
1st picture is how it looks in developer tools in Chrome for example and 2nd picture is how it looks on iphone.
HTML
<form class="newsletter-form">
<div class="newsletter-form-container">
<input id="newsletter" type="email" placeholder="name#domain.com" />
<button id="newsletter-send" type="button"><i class="material-icons">chevron_right</i></button>
</div>
<p id="newsletter-sub-status"></p>
</form>
CSS
.newsletter-form-container {
position: relative;
width: 40%;
margin: 0 auto;
}
.newsletter-form {
position: absolute;
height: auto;
bottom: -38px;
left: 0;
z-index: 50;
width: 100%;
-webkit-appearance: none;
}
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
}
there is one more form and that one is positioned static and the inputs are display: block and also displays wrongly. Is this just some iOS thing that I can fix with -webkit something? Couldn't find the answer on google, so I'm trying here.
PS: sorry for different picture sizes, one was taken as phone screenshot and other one is snip from PC.
So, I found out that, iOS just adds padding to the input element by default and since the default setting for the input is box-sizing: content-box; all you have to do is:
a) set padding to the input element to 0 padding: 0;
or
b) set box-sizing: border-box; and then the padding goes inside the element basically.
final CSS for the element then looks like this:
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
padding: 0;
}
I have the following snippet which styles one input text element as follows:
Every written char will be placed into a special square box. The problem is that appeared a strange behaviour when I wrote the last char(when maxlength property is reached). The text is just moved some pixels to the left.
That behaviour can be observed here:
#text{
background-image: url("https://png.pngtree.com/element_origin_min_pic/29/03/20/1656fa8074e9571.jpg");
width: 255px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 13px;
}
<br>Cnp: <input type="text" maxlength="13" id="text"/> </br>
Thanks in advance.
That's beacuse your letters are "wider" than they really are, because of letter spacing. To get rid of this (default) behaviour, you need to add a little bit of javascript to reset the elements scrollLeft to 0 after insertion.
Now I just added these handlers via html onkeyup and onchange, as you can see it works.
#text{
background-image: url("https://png.pngtree.com/element_origin_min_pic/29/03/20/1656fa8074e9571.jpg");
width: 255px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 13px;
}
<br>Cnp: <input type="text" maxlength="13" id="text" onkeyup="this.scrollLeft = 0;" onchange="this.scrollLeft = 0;" /> </br>
It looks like the letter-spacing is just too wide. Try changing it to:
letter-spacing: 12.3px;
I arrived at the number 12.3 by just testing it in the browser.
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I have added CSS style to the submission button form my web form. However, while it looks as I hoped it would on my laptop – I tried both Safari and Chrome and the button appeared the same – the mobile button is not properly shaped and not colored correctly.
Relevant HTML:
<html>
<body>
<form action="{{ post somewhere }}" method="post">
<strong>+1</strong><input name="number-form" placeholder="4045553829" id="number-input" maxlength="10" type="text" onkeypress="return onlyNumbers()"></input>
<input type=submit value="verify number" class="submit-button"></input>
</form>
</body>
</html>
Corresponding CSS:
body {
background-color: #fff;
display: block;
position: absolute;
height: auto;
width: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
}
form {
width: 650px;
margin-left: auto;
margin-right: auto;
}
strong {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2em;
padding-right: 10px;
}
input, #number-input, #veriform {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2.5em;
color: #181818;
}
#number-input {
width: 260px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #a8a8a8;
}
.submit-button {
background-color: #8a50c9;
color: #fff;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
border: none;
}
I have created a JSFiddle – at http://jsfiddle.net/rpE3w/1/ – so it can be viewed in browser.
While on a PC the button is a solid-purple rectangle with white lettering, viewing it on a mobile browser seems to yield a rounded, gradient button.
Many thanks in advance.
You could roll your own with a clickable image instead of an input. Between Mac, Windows, Linux, Android, iOS, Windows Mobile and Blackberry, if you give the browser any choice in what the button looks like, it won't look the same in all browsers. An image will be more consistent.
It appears that I am not the only one who has had this problem CSS submit button weird rendering on iPad/iPhone.
As Francesco points out, this is a rendering error done by iOS devices, and to disable the button modifications I just need to add
-webkit-appearance: none;
to any classes or ids I do not want to be rendered irregularly.
Not exclusively iOS devices either. Android devices - at least those using Chrome and Firefox - have similar rendering behavior for buttons.
I would like to have some guidance on how to make good forms with submit buttons that look flat but not like the default ones that are done when using html. I want the submit buttons like those found on this website.
You should try applying CSS to your submit buttons like follow:
<head>
.......
your html code
.....
<style>
.pass {
width: 105px;
padding: 5px;
margin: 2px;
font-weight: bold;
color: #065fba;
background: #f4f5f8;
font-size: 11px;
border: #e2e2e2 1px solid;
}
</style>
</head>
.......
your html code
.....
<input trpe="submit" class="pass" value="Submit" />
......
...
.
Hope this helps.
The css use for the 'Post Your Answer' button on this website is (more or less):
input[type="submit"] {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
For cross-browser compatibility you'll need to add a class to your <input type="submit" /> as the CSS [type=""] attribute isn't recognised in older versions of Internet Explorer.
If you want to see how any element has been styled on any examples you like the look of, use Firebug or its equivalents for other browsers, which will show you the CSS applicable to a selected element.
In Stack Overflow's case, it's this, with the buttons being wrapped with a <div class="form-submit">:
.form-submit input {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
}