CODEWITHSUNDEEP
htmlcssbutton
user1330492
user1330492

Reputation:

How to change the css to affect only id or class instead of input[type=""]

I like these buttons but i need them to only affect buttons with a unique id (or class). how to change them over? I attempted to do this but it did not work should they be btns in divs with the css on the div or should the button have an id or what?

<pre><code>
<html>
<head>
<style type="text/css">

input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
}

input[type="submit"], input[type="button"] {


float: right;
  margin: 2em 1em 0 1em;
  width: 10em;
  padding: .5em;
  border: 1px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}

input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

input[type="button"] {
  background: #f33;
}
</style>


</head>
<body>

  <div id="formButtons">
    <input type="submit" id="sendMessage" name="sendMessage" value="Reply" />
    <input type="button" id="cancel" name="cancel" value="Cancel" />
  </div>

</body>
</html>


</code></pre>

Upvotes: 0

Views: 19037

Answers (2)

TheTechGuy
TheTechGuy

Reputation: 17374

If you need to apply css to all buttons

input[type="button"]
{
   /* CSS property */
}

if you want to apply css to particular button, no need to supply input[type="button"], just use a class or ID

.special_button
{
  /* my css property */
}

or

#special_button
{
  /* my css property */
}

Upvotes: 3

Tim M.
Tim M.

Reputation: 54377

Is this what you are asking?

#yourIdHere{ /* impacts only ID */ }

.yourClassHere{ /* impacts only elements with class */ }

INPUT.yourClassHere{ /* impacts only inputs with class */ }

CSS offers a rich set of selectors (many of which can be combined): http://www.w3.org/TR/selectors/#selectors

Upvotes: 0

Related Questions