CSS 在 Laravel 4 中为表单设置提交按钮的样式
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17560611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling a submit button for a Form in Laravel 4
提问by user1072337
I am trying to style a submit button for a form in Laravel 4. However, when I try the following, I get the same old boring default button:
我正在尝试为 Laravel 4 中的表单设置提交按钮的样式。但是,当我尝试以下操作时,我得到了相同的旧乏味默认按钮:
{{Form::submit('Submit', null, array(
'type' => 'button',
'class' => 'btn btn-large btn-primary openbutton',
));}}
Is there a special way to style this type of button in a form context? Thank you.
有没有一种特殊的方法可以在表单上下文中设置这种类型的按钮的样式?谢谢你。
回答by mogetutu
Try removing 'null' before the options array
尝试在选项数组之前删除 'null'
{{Form::submit('Submit', ['class' => 'btn btn-large btn-primary openbutton'])}}
If you are just looking for a normal html element try
如果您只是在寻找普通的 html 元素,请尝试
{{Form::button('Open Image', ['class' => 'btn btn-large btn-primary openbutton'])}}
回答by Midnight-Coding
Try something like this...
尝试这样的事情......
{{ Form::submit('Submit', array('class' => 'primary')), Form::reset('Clear', array('class' => 'secondary')) }}
Then in your css...
然后在你的css...
form input[type="submit"], form input[type="reset"] {
-moz-border-radius: 5px;
-webkit-border-radius: 5px; border-collapse: separate !important;
border-radius: 5px;
}
form input.primary[type="submit"] {
clear: both;
margin: 20px 10px 0px 10px;
padding: 0px;
border: 0px;
width: 125px;
height: 31px;
background-color: #333333;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
form input.secondary[type="reset"] {
clear: both;
margin: 20px 10px 0px 10px;
padding: 0px;
border: 0px;
width: 125px;
height: 31px;
background-color: #555555;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
I hope this helps...
我希望这有帮助...