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.
Related
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>
On my website people somehow cannot write in the inputs when they use Safari. The problem is only present in safari.
(http://www.rootshybrid.dk/blivfrivillig/)
From other threads I've seen the solution being the user-select code. I have tried adding both webkit-user-select: auto; and webkit-user-select: text; to the css of the input fields, but it still doesn't work.
Anyone have a solution to my problem?
The combination input padding on line 40 of main.css
input, select, textarea {
border-radius: 6px;
border: 1px solid #d0d0d0;
outline: 0;
font-family: Roboto;
padding: 15px 10px; /*<<<<<<<*/
font-size: 15px;
webkit-user-select: auto;
}
Is not working with the height on line 55 and 80 of main.css
.whitebox input[type="text"] {
height: 20px;
}
Just add a hollow class to the <p> value
for example
<p class="abc">
<label class="stdlabel">Fornavn *</label>
<input type="text" name="firstname" value="">
</p>
Because it seems that the problem occurs for those input labels only
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I have a form with an input field. While the input field comes in front, the text cursor seems to go behind. I have tried various Z-index combinations, which don't help, as the object is already in front. How do I get the cursor in front? I know I'm doing something trivially wrong, but I'm not able to place it
Code snippet:
.searchBox {
background-color: #7e7e7e;
border: medium none;
color: #fff;
font-family: arial;
font-size: 12px;
font-style: italic;
font-weight: 600;
height: 24px;
padding-left: 10px;
position: absolute;
width: 38.7%;
z-index: 3000;
}
.searchIconBox {
background-color: #7e7e7e;
height: 24px;
margin-top: 0;
padding-left: 5px;
padding-top: 3px;
width: 5%;
}
<div style="width:49%;">
<form style="width:94%;" class="pull-left">
<input type="text" class="searchBox" placeholder="Search"></input>
</form>
<div class="pull-right searchIconBox">
<asset:image src="search.png" />
</div>
</div>
The cursor isn't going behind. It is camouflaging with the color #7e7e7e
Try giving the color of
.searchBox{
background-color: yellow;
}
and then hover the cursor, you will see it is visible
It's working fine for me, there just isn't a convenient color for the cursor to change to with the gray of the search box.
Try something like...
.searchBox{background-color:#d0d0d0;}
and your cursor will be much more visible.
You need to add more padding-left in .searchBox because cursor can starts after the icon:
.searchBox { padding-left: 25px; }
If you need that searchBox doesn't expand to right, add box-sizing
.searchBox { padding-left: 25px; box-sizing : border-box; }
I have an input text box, and I am trying to have it be the exact length for the amount of text overlayed in the value field. I have doubled checked that the size is the same length as the number of characters in the value field. However, the input box is appearing shorter than the text. The brackets are just php echos in Laravel Blade syntax. The code is below:
HTML:
<div class="fan-name-change">
<input type="text" size="{{$name_length}}" class="fan-name" autocomplete="off" value="{{$fan->first_name}} {{$fan->last_name}}" id="user_name" name="user_name" placeholder="Name">
</div>
CSS:
.fan-name-change {
margin: 31px 0 0;
display:block;
}
.fan-name-change input[type="text"] {
height: 40px;
padding: 5px;
background: rgba(50, 50, 54, 0.5);
border-radius: 0px;
border: 0px;
color: #FFFFFF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 27px;
margin:0 auto;
}
You need to use CSS. So
style="width:{{$name_length*$fontSize}}px;"
edit: sorry, missed some out!