web-dev-qa-db-ja.com

送信ボタンをリンクとして表示するにはどうすればよいですか？

これはIEでは機能しません。

.text-button { background: transparent; 
               text-decoration: none; 
               cursor: pointer; }



<input type="submit" class="text-button" value="vote+"/>

四角いボタンが表示されます。

javascripthtmlcssforms
28
Will Curran

これからコピー link ボタンをリンクのように見せることができます-

.submitLink {
  background-color: transparent;
  text-decoration: underline;
  border: none;
  color: blue;
  cursor: pointer;
}
submitLink:focus {
  outline: none;
}
<input type="submit" class="submitLink" value="Submit">
43
Vishal
<form name='test'>
    <a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
11
labue

私はポストリダイレクトページを準備する必要があり、それらはフォームの送信に依存しているため、何らかの理由でJavaScriptが失敗した場合でも機能するように何かを配置する必要がありました。 JavaScriptが失敗した場合、フォームを送信するためのアンカーも機能しません。ボタンを実際にリンクのようにフォーマットする必要がありました（そのため、リダイレクトページはリンクのように見えます）。私はVishalが書いたものに基づいてソリューションを作成しましたが、インラインで見やすくするためにいくつかの小さな変更を加えました。これが結果です。

button
{
    padding:0;
    background-color:transparent;
    text-decoration:underline;
    border:none;
    border:0;
    color:blue;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
}

button::-moz-focus-inner
{
    border:0;
    padding:0;
}
To complete the redirect <button>click here</button>.

編集：FireFoxでパディングを削除するためのトリックは here から取られました

Edit2：ボタンが親要素からフォントスタイルを継承して有効なリンクのように見えるようにしました（以前は、ボタンのフォントサイズとフォントファミリは異なりました）。

3
jahu

これを試して：

<style type="text/css">
    .text-button 
    { 
        background-color: Transparent;                 
        text-decoration: underline;                 
        color: blue;
        cursor: pointer; 
        border:0
    }    
</style>
<input type="submit" class="text-button" value="vote+"/>
1
Chandu

IMO私は対処するのが難しい開発者だと思います。このアプリケーションをリクエストする人に、ボタンのままにするオプションを提案することはできますか？

次のことを検討しましたか？

  1. UIの観点からは、フォーム以外のボタンを使用してフォームを送信するのがベストプラクティスですか？
  2. CSSアプローチを採用している場合、Safariでボタンの外観を変更できるとは思いません。
  3. いくつかのJavaScriptで<a>タグを使用すると、送信ボタンのないフォームが作成され、将来頭痛の種になる可能性があります。他の<a>タグからの送信リンクを簡単に検出するにはどうすればよいですか？
1
Doug Chamberlain

上記でmofoloによって提出された答えがより正しい解決策であると思います

アンカーボタンのように見える送信ボタンのCSSスタイル設定は、ブラウザを越えません。 text-decoration：underlineスタイルは、多くのブラウザタイプで無視されます。

私の経験上、最良の方法は、アンカータグのonclickイベントでJavaScriptを使用することです。

例えば：

ユーザー詳細フォーム画面の「削除」リンク。IDが「userdetails」のフォームを送信する前に確認

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a>
1
SyntaxGoonoo

これを試して：

.text-button {
 border: none;
 background: transparent;
 cursor: pointer }
0
Paul Spencer