Как сделать так, чтобы кнопка отправки отображалась как ссылка?

Question

Это не работает в IE:

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



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

Отображает квадратную кнопку.

Answer 1

Скопировано с этой ссылки , и ваша кнопка будет выглядеть как ссылка -

.submitLink {
  background-color: transparent;
  text-decoration: underline;
  border: none;
  color: blue;
  cursor: pointer;
}
submitLink:focus {
  outline: none;
}

<input type="submit" class="submitLink" value="Submit">

Answer 2

<form name='test'>
    <a href="javascript:document.forms['test'].submit()">As a link</a>
</form>

Answer 3

Мне нужно было подготовить страницу перенаправления постов, и, поскольку они полагаются на отправку форм, мне нужно было что-то разместить на них, чтобы они работали, даже если javascript по какой-то причине не работал. Если javascript не работает, якорь для отправки формы тоже не будет работать. Мне нужно было отформатировать кнопку, чтобы она выглядела как ссылка (поэтому страница перенаправления выглядит как одна). Я основал свое решение на том, что написал Вишал, но я сделал несколько небольших изменений, чтобы он выглядел лучше. Вот результат.

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 был взят из здесь

Edit2: кнопка наследует стиль шрифта от родительского элемента, чтобы он выглядел как действительная ссылка (ранее размер шрифта и семейство шрифтов отличались для кнопки).

Answer 4

Я полагаю, что ответ, представленный выше mofolo, является более правильным решением

Стиль CSS для кнопок отправки, чтобы они выглядели как теги привязки, НЕ пересекает браузер. Украшение текста: стиль подчеркивания игнорируется многими типами браузеров.

Лучший метод из моего опыта - использовать javascript для события onclick якорного тега.

Например:

Ссылка «Удалить» на экране формы сведений о пользователе, с подтверждением перед отправкой формы с идентификатором «userdetails»

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

Answer 5

IMO Думаю, мне сложно иметь дело с разработчиком.Я хотел бы предложить человеку (-ам), запрашивающему это приложение, возможность просто оставить его кнопкой?

Рассматривали ли вы / они следующее?

1. Лучше ли с точки зрения пользовательского интерфейса использовать что-либо, кроме кнопки для отправки формы?
2. Если вы продолжите использовать CSS-подход, я не верю, что Safari позволит вам изменить внешний вид кнопки.
3. Если вы используете тег <a> с некоторым JavaScript,тогда у вас есть форма без кнопки отправки, которая может вызвать головную боль в будущем.Как вы легко обнаруживаете ссылку для отправки из других тегов <a>?

Answer 6

Попробуйте это:

<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+"/>

Answer 7

Вы не можете сделать это с кнопкой, поскольку такие элементы, как элементы ввода, являются элементами браузера и компьютера клиента, а не вашим кодом CSS.

Вы должны использовать тег <a href=""></a>, который ссылается наФрагмент javascript, который затем отправляет форму для вас.

Answer 8

попробуйте это:

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