web-dev-qa-db-ja.com

グリフィコンを送信ボタンとして機能させる方法は？

タイプSubmitのボタンがあり、テキストはedit for POSTメソッドのHTML.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>

CSSとLook of glyphicon-editはフィドルに含まれています here

htmlcssasp.netinputglyphicons
11
Raviteja

タイプsubmitのボタンを記述し、内部にグリフィコンをラップすることができます

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

編集：

  • ボタンのスタイルはglyphiconに適用されますが、デフォルトのボタンのcssプロパティをリモートにすることができます（例：background:none;border:none;padding:0;）新しいスタイルを適用します
  • onclickボーダーが表示されますか？ -outline:noneは、onclickの枠線の問題を解決する必要があります。
28
Suman K.C

上記の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という名前のクラスを1つ追加しました。このクラスでは、境界線を削除し、背景を透明にしています。

これが動作しています fiddle 。

7
Noopur Dabhi

私が見ることができることから、他の要素を使用する必要はありません。 <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>
2
misterManSam

これを試して ：）

.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>
0
Jinu Kurian