css - Setting max-width on an input element -
today tried setting max-width: 200px on <input type="text"> apparently gets ignored browsers.
if set width: 200px gets applied (but doesn't resized if input field gets resized smaller 200px.
how apply max-width css property input fields?
if set max-width:200px; have set width in relative unit %. because if set width:200px site of input not going change;
this example
//copy , paste , run in browser <!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 change width resize screen, 300px(max-width). non fluid on keep width, if resize screen
hope helps t04435
Comments
Post a Comment