工具材料：Dreamweaver 软件或其他代码编辑器
1：可以添加行内样式代码和效果：
html的表单按钮改变宽度：
方式一、直接在元素上定义样式，代码如下：
方式二、使用css控制，给按钮添加一个类名，如：
温馨提示：答案为网友推荐，仅供参考
第1个回答 2016-12-23
工具材料：Dreamweaver 软件；或其他代码编辑器；
1：可以添加行内样式代码和效果：
</style>
</head>
<body>
<input name="" type="text" size="15" style="width:50px;height=20px;">
如何设置html中input宽度
</body>
第2个回答 2016-12-14
解决方案1：
<input name="" type="text" size="15" style="width:50px;//宽度 height=20px;//高度"/>
或
<input name="" type="text" size="15" class="自己起名字"/>
CSS中
<style>
.自己起的名字{
wdith:**;
height:**;
}
</style>
解决方案2：
加上 style="width:...px;height:...px;" (width=宽 height=高 px=像素) 如：
<input name="" type="text" size="15" style="width:100px;height:50px;"/>
就是说宽为100像素，高为50像素
html 的样式在body 定义
追问：
如何在css中设置，可以在CSS中设置么？
比如 input { width:10px;height:20px}
解决方案3：
如果input框的type值是text，则是单行文本框，maxlength属性是设置能填多少字符，size是可以看见多少字符，要想改变input框的样式可以利用CSS实现，比如可以改变它的背景和边框当然还有宽度高度
解决方案4：
style='height:20px; width:50px;'
解决方案5：
<input name="" type="text" style="height:20px; width:120px;"/>
解决方案6：
方法1:
设置高度属性:height
设置宽度属性:width
方法2:
设置样式属性:style
语法:
<input name="" type="text" size="15" style="height:100px;width:100px" />
注:px代表像素!
<input name="" type="text" size="15" style="width:50px;//宽度 height=20px;//高度"/>
或
<input name="" type="text" size="15" class="自己起名字"/>
CSS中
<style>
.自己起的名字{
wdith:**;
height:**;
}
</style>
解决方案2：
加上 style="width:...px;height:...px;" (width=宽 height=高 px=像素) 如：
<input name="" type="text" size="15" style="width:100px;height:50px;"/>
就是说宽为100像素，高为50像素
html 的样式在body 定义
追问：
如何在css中设置，可以在CSS中设置么？
比如 input { width:10px;height:20px}
解决方案3：
如果input框的type值是text，则是单行文本框，maxlength属性是设置能填多少字符，size是可以看见多少字符，要想改变input框的样式可以利用CSS实现，比如可以改变它的背景和边框当然还有宽度高度
解决方案4：
style='height:20px; width:50px;'
解决方案5：
<input name="" type="text" style="height:20px; width:120px;"/>
解决方案6：
方法1:
设置高度属性:height
设置宽度属性:width
方法2:
设置样式属性:style
语法:
<input name="" type="text" size="15" style="height:100px;width:100px" />
注:px代表像素!
第3个回答 推荐于2018-02-26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css怎么把背景图片拉伸至100%</title>
<style>
input {
width: 250px;
height: auto;
}
</style>
<script>
function test() {
var input = document.getElementById('a');
input.style.width = input.value + 'px';
}
</script>
</head>
<body>
<div><input type="text" id="a" placeholder="输入想要的宽度，点击测试看效果" /></div>
<div><button onclick="test()">测试</button></div>
</body>
</html>本回答被提问者和网友采纳
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css怎么把背景图片拉伸至100%</title>
<style>
input {
width: 250px;
height: auto;
}
</style>
<script>
function test() {
var input = document.getElementById('a');
input.style.width = input.value + 'px';
}
</script>
</head>
<body>
<div><input type="text" id="a" placeholder="输入想要的宽度，点击测试看效果" /></div>
<div><button onclick="test()">测试</button></div>
</body>
</html>本回答被提问者和网友采纳
第4个回答 2016-11-23
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<head>
<style type="text/css">
#input{
width: 233px;
}
</style>
<title>demo</title>
</head>
<body>
<input type="text" name="input" id="input" value="" placeholder="input的宽度为233px" />
</body>
</html>
<html>
<meta charset="UTF-8"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<head>
<style type="text/css">
#input{
width: 233px;
}
</style>
<title>demo</title>
</head>
<body>
<input type="text" name="input" id="input" value="" placeholder="input的宽度为233px" />
</body>
</html>
相似回答