asp.net 如何使一个字形工作作为一个提交按钮?

3htmauhk  于 2023-08-08  发布在  .NET
关注(0)|答案(5)|浏览(87)

我有一个Submit类型的按钮,文本为edit,用于在asp.net HTML中的POST方法。BeginForm。我想用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

cvxl0en2

cvxl0en21#

您可以编写一个类型为submit的按钮,并在内部 Package 一个字形图标

<button type="submit">
   <span class="glyphicon glyphicon-edit"></span>
</button>

字符串

编辑:

  • 按钮样式将应用于glyphicon,但您可以远程默认按钮css属性(例如。background:none;border:none;padding:0;)并应用新样式
  • onclick边框是否出现?- outline:none应该可以解决单击时的轮廓边框问题。
wdebmtf2

wdebmtf22#

使用上面的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

r6hnlfcb

r6hnlfcb3#

从我所看到的,没有必要使用其他元素。为提交按钮使用<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;
}

个字符

qlzsbp2j

qlzsbp2j4#

试试这个:)

.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;
}

个字符

相关问题