Menu
Today I tried setting max-width: 200px on an <input type="text"> but apparently it gets ignored by browsers.
If I set width: 200px then it properly gets applied (but doesn't get resized if input field gets resized smaller than 200px.
How do I apply max-width CSS property to input fields?
651
This can be done by using the size attribute or by width attribute to set the width of an element. The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute.
Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute.
The max attribute specifies the maximum value for an <input> element. Tip: Use the max attribute together with the min attribute to create a range of legal values. Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width .
If you set max-width:200px; then you have to set the width in a relative unit like %. Because if you set width:200px the site of the input is not going to change;
this is an example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
div{
background-color: tomato;
width: 100%;
max-width: 1024px;
margin: auto;
}
input{
margin: auto;
background-color: red;
display: block;
margin-bottom: 2rem;
}
input#no-fluid{
border:2px black dotted;
width: 200px;
max-width: 300px;
}
input#fluid{
border:2px black solid;
width: 50%;
max-width: 300px;
}
</style>
</head>
<body>
<div>
<input id="no-fluid" type="text">
<input id="fluid" type="text">
</div>
</body>
</html>The fluid input will change its width as you resize the screen, but only up to 300px(max-width). The non fluid on will keep its width, even if you resize the screen
HOPE this helps T04435
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
