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 make one side of a div pointy with CSS?

    Show span beside select

    Border positioning: how to?

    How to select the second th into the thead of a table having a specific ID using CSS?

    Wordpress how to tell my css version

    how to display three text fields on one line

    How can I get CSS codes in a style element? [duplicate]

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    looking for a good explanation on how html gets rendered and how css effects it [closed]

    How to line up lists side by side?

    How to get 2 fixed and 1 dynamic column in CSS

    How to add classes to div using jquery in sequence like animation

    How to change nav text color when scrolled over other div anchors in the page

    How can change the style of
      tag in CSS

    how to format a single html a href text to have multiple css properties (two different font families)

    CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

    how to remove and add classes using same function? [closed]

    How do I float a
  • to the right in CSS?
  • How to put text and image in a same line?

    How to implement a partially flexible screen layout with a grid framework?

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to make a background using CSS gradient with flat color?

    How to use these ruby based CSS stylsheet frameworks languages?

    How to use Open Sans font with cakePhp 3?

    How to disable by overriding webkit-transform and not deleting the line

    Show Link on image at hovering in jquery

    How to display code in the same line?

    How to make the bootstrap button,when clicked to redirect to a specific page

    how can resize dynamically the logo of the header?

    How to format date elements (year, month, date) individually with CSS and Rails i18n?