CODEWITHSUNDEEP
css
SuperString
SuperString

Reputation: 22519

css input submit link

I have this html:

      <form id="REVIEW" method="post" action="/SortReviews">
        <fieldset class="sort">
          <input type="submit" value="$ratingLine"/>            
        </fieldset>
      </form>

I want to give the submit button some css, so it looks like a link. 

{
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

How do I do it?

Upvotes: 17

Views: 36281

Answers (5)

Ryan Walton
Ryan Walton

Reputation: 1127

Here's how I did it with html and css:

<p><form class='input-to-link-form'><input type="submit" value="Place your order" class="input-to-link"></form> and make payment.</p>

.input-to-link {
  margin: 0;
  padding: 0;
  color: #0088cc;
  text-decoration: none;
  font-weight: 300;
  cursor: pointer;
  background: none;
  border: none;
}

.input-to-link-form {
  margin: 0 4px 0 0;
  padding: 0;
  float: left;
}

Upvotes: 0

Eric Frick
Eric Frick

Reputation: 857

You need to add a class, for example "submitClass".

<input type="submit" value="$ratingLine" class="submitClass"/>

   .submitClass {
        background: none;    
        border: none;    
        color: blue;    
        text-decoration: underline;    
        cursor: pointer;
   }

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You should assign a class to the button

<input type="submit" value="$ratingLine" class="link-lookalike"/>

and in your css file (or inside a <style type="text/css"></style> tag) use

.link-lookalike {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

this way you can assign the class to different buttons in your page (if required), and they will all get the same look.

Upvotes: 2

Herman Schaaf
Herman Schaaf

Reputation: 48435

<style type="text/css">
form input[type="submit"]{

    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

Is this not what you're looking for?

The other option, as already noted, is to use javascript to submit the form onclick of a anchor element:

<a href="#" onclick="document.review.submit()">submit</a>

with your form having an attribute: name="review"

Upvotes: 30

Tim Hettler
Tim Hettler

Reputation: 1256

Use the button element:

<button type="submit">$ratingLine</button>

Upvotes: 1

Related Questions