如何使字形图标用作提交按钮?
Posted
技术标签:
【中文标题】如何使字形图标用作提交按钮?【英文标题】:How to make a glyphicon work as a submit button? 【发布时间】:2016-03-11 16:14:38 【问题描述】:我有一个Submit
类型的按钮,文本为edit
,用于asp.net html.BeginForm 中的POST 方法。我想用glyphicon-edit
替换它。如何实现与input
相同的功能.我可以使用“编辑”按钮实现该功能。我想要使用 glyphicon-edit
的相同功能
HTML
<br />
<input type="submit" class="btn btn-default" name="Editing" value="Edit" />
<div class="circle">
<div class="glyphicon glyphicon-edit"></div>
</div>
glyphicon-edit
的 CSS 和外观包含在小提琴 here 中
【问题讨论】:
【参考方案1】:您可以编写一个类型为submit
的按钮并在里面包裹一个字形图标
<button type="submit">
<span class="glyphicon glyphicon-edit"></span>
</button>
编辑:
按钮样式将应用于 glyphicon,但您可以远程默认按钮 css 属性(例如background:none;border:none;padding:0;
)并应用新样式
点击边框出现? - outline:none
应该可以解决点击时的轮廓边框问题。
【讨论】:
如果我使用这个,按钮的样式将被应用,我不想要那个。看我的小提琴。 @IamRaviteja 您始终可以覆盖/取消默认按钮 css 属性。 (例如background:none; border:none;padding:0;
)背景颜色、边框、填充只是按钮的默认属性
outline:none;
会解决 onclick 的轮廓边框问题。我看不到我的边框。【参考方案2】:
使用上面的html和css:
HTML:
<div class="circle">
<button type="submit" class="submit-with-icon">
<span class="glyphicon glyphicon-edit"></span>
</button>
</div>
CSS:
.circle
border-radius: 100%;
border: 0.25em solid black;
height: 50px;
width: 50px;
.glyphicon.glyphicon-edit
font-size:28px;
padding: 8px 3px 0 8px;
.submit-with-icon
background: transparent;
border: 0px;
padding: 0;
outline: 0;
.circle:active
content: '';
background-color: rgb(235, 235, 235);
border-color: rgb(173, 173, 173);
我添加了一个名为 submit-with-icon
的类,我将在其中移除边框并使背景透明。
这里正在工作fiddle。
【讨论】:
点击时出现边框 我已经更新了我的答案和小提琴。添加大纲:0;在 submit-with-icon 类中,它将删除点击边框。【参考方案3】:据我所知,没有必要使用其他元素。对提交按钮使用<button>
元素,而不是<input>
,并将glyphicon-edit
类直接应用到它。
根据需要设置悬停、焦点和活动状态的样式,并删除默认焦点轮廓。
字形以line-height
垂直居中。
示例
.glyphicon.glyphicon-edit
font-size: 25px;
line-height: 45px;
border-radius: 50%;
border: 3px solid black;
height: 50px;
width: 50px;
background: none;
transition: color .3s, background .3s;
/*box-shadow helps soften the choppy circle*/
box-shadow: 0 0 1px #000, inset 0 0 2px #000;
.glyphicon.glyphicon-edit:hover
background: #000;
color: #FFF;
.glyphicon.glyphicon-edit:focus
border-color: blue;
outline: none;
.glyphicon.glyphicon-edit:active
border-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://jsfiddle.net/iamraviteja/DTcHh/14991/netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="glyphicon glyphicon-edit" name="Editing" value="Edit"></button>
【讨论】:
【参考方案4】:试试这个:)
.circle
border-radius: 100%;
border: 0.25em solid black;
height: 50px;
width: 50px;
.glyphicon.glyphicon-edit
font-size: 28px;
padding: 8px 0 0 3px;
.circle button
background: none;
border: none;
outline: none;
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="circle">
<button type="submit">
<span class="glyphicon glyphicon-edit"></span>
</button>
</div>
【讨论】:
点击边框出现 @IamRaviteja 更新了它。将“outline: none”添加到按钮将解决此问题。 :)以上是关于如何使字形图标用作提交按钮?的主要内容,如果未能解决你的问题,请参考以下文章