All Questions
Tagged with html-input css
111 questions
1
vote
1
answer
73
views
How to change text spacing in HTML time inputs?
I am making a time range selector, and using Bootstrap. It needs to be a specific fixed with so that it can fit with the other components. I've noticed that Firefox renders the text of a type="...
0
votes
1
answer
36
views
How can I remove the default arrow from the list input and add a new arrow using pure html and css? [duplicate]
I want to remove the default arrow appearing in the list input field. is there anyone please who can help me and show me a way to add a new arrow in place of the default arrow here?
<body>
&...
0
votes
2
answers
240
views
Change the color of an element when text is typed in input?
I'm looking for a way to change the style of an element, (like the <body>) when not just text, but specific number like "5214" or something is entered in an <input>. With my ...
1
vote
1
answer
101
views
HTML input field width varies with content using only CSS (no JS)
I can set the width of an <input type=number> field with CSS width = 6em; or width = 100%, but those only set a fixed width or a width that varies with the container. I want the width to depend ...
0
votes
2
answers
448
views
Visual bug when input is autofilled
I have an html form with a bunch of inputs. When an input gets autofilled by Safari and I then attempt to edit the input there is a weird overlapping of the string.
If I click around it seems to fix ...
12
votes
6
answers
3k
views
How to create a scientific HTML slider with input type="range"
I need to create a scientific input slider. More precisely:
n ticks, example: no matter the range (0 - 200, 1 - 11, etc.), I want 11 ticks covering the whole range
the number value label below each ...
-2
votes
1
answer
754
views
create html input for mathematical expression
I need to know how can i create an input text in HTML for a mathematical formula like the one in geogebra.org/classic
3
votes
0
answers
394
views
Placeholder for time input in Safari
I am using <input type="time" />. Chrome, Firefox, and Edge renders it properly i.e. the placeholder used is : --:-- -- where as Safari uses 12:30 PM as a placeholder. What is the ...
1
vote
1
answer
102
views
JavaScript hover event on a vendor specific pseudo-elements
I have the following html input tag.
$("input[type='range']::-webkit-slider-thumb").on('hover', function () {
//...
});
input[type="range"] {
height: 0.5rem;
box-shadow: 0 0 0.25rem ...
0
votes
1
answer
35
views
Resizing Input boxes and maintaining alignment
I am trying to resize my zip code input box to be half the size of the container. In the mobile version of my site it works. But if I try to change it in my media query at 768 px to be 50vw it knocks ...
1
vote
1
answer
115
views
Applying overflow to box shadow only
I'm trying to build a input ranged slider bar. But I'm facing a problem.
body {
justify-content: center;
align-items: center;
min-height: 100vh;
background: #151515;
}
#rangeValue {...
1
vote
5
answers
7k
views
How to disable selection / highlighting of a HTML input element?
How to prevent user-selection / highlighting of an <input>?
This:
input {
user-select: none;
}
<input type="number" value="123" />
and the methods from How to disable text ...
2
votes
2
answers
2k
views
HTML slider (input of type range) centered on 0
This is a classical HTML slider:
<input type="range"></input>
How to have this "centered on 0" behaviour instead? (my bad for my mockup graphic skills!)
1
vote
0
answers
1k
views
How to format time input as "mm:ss" without JavaScript
I am trying to format the time input as "mm:ss" format instead of the default "hh:mm" format. I have read the document about Time Input but I still don't know how to change its ...
3
votes
1
answer
410
views
HTML Range Getting Stuck Sometimes
As I slide the HTML range input, my mouse turns into the "not-allowed" cursor, and the sliding stops.
.main__slider__input {
width: 100%;
}
<div class="main__slider">
<!-- &...