How to style an input that is a type=“button”?


Tags: html,css,button,input

Problem :

I am trying to make CSS changes a pop-up that basically is a centered div with a cookie policy and then an 'Accept' button. I am working with DNN CMS, and the pop-up is a module, so there is no way to change the div or class names.

The CSS works fine for the 'Accept' button, but then it affects the inputs for the Comment table. How do I write the CSS so that the CSS only affects the 'Accept' button in that div?

By the way, the 'Accept' button is an input that is type="button".

HTML for 'Accept' button

<input name="CookieConsent_CloseLink" id="View_CookieConsent_sal_CloseLink" value="Accept" type="button">

CSS for 'Accept' button

#View_CookieConsent_sal_CloseLink button, input {
font-family: 'Oswald', arial, sans-serif;
text-transform: uppercase;
font-size: 14px;
padding: 5px;
position: absolute;
left: 40%;
margin-top: 10px;
margin-bottom: 10px;
}

HTML for 'Accept' button

<input name="txtYourName" value="Anonymous" id="txtYourName" class="NormalTextBox" style="width: 100%" type="text">


Solution :

input[type="button"] {
  font-family: 'Oswald', arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px;
  position: absolute;
  left: 40%;
  margin-top: 10px;
  margin-bottom: 10px;
}

    CSS Howto..

    How to use Font Awesome for checkboxes etc

    how can i change the css style on click with table

    How to center text next to a responsive image in Bootstrap3

    How to apply css to buttons inside gridview

    How to set background color based on YAML front matter (Jekyll)

    How to make a custom clickable shape with CSS to cover the exact needed area?

    In IE6, how to implement a:hover?

    How do I add a text shadow with CSS2 [closed]

    how to apply css property to my first div class only

    How to draw a dotted line with css?

    How to animate 2 css layouts from left to right or from right to left with jquery?

    how to do display none using css

    How to know the correct css selector or group of selector for any html element quickly?

    How do I place text to the right of a relatively positioned image?

    How to make no borders in a td rowspan rows

    How to give menu sub menu options

    How to make my text appearing while scrolling website

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How to stop shadow effect from moving using pure css?

    Stack row 2x2 on Bootstrap using rows in same height… how?

    How to create menu of overlayed divs?

    How to mix colors in CSS?

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to get item to appear on mobile homepage only(wordpress)

    How to show span class inside the textbox?

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    How to ignore parent css style

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?