How do I change the color of the button element?-CodePudding

I tried changing the color and the background color in the section but my button still appears as default. I have tried using a second CSS file and giving it a class but it still will not work. Unless I am just doing something wrong, I think it has something to do with MapBox.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
  <link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css"
    type="text/css"
  />
  <title>GeoTool V0.1</title>
  <style>
    body {
      margin: 0;
    }

    #map {
      height: 75vh;
      width: 100vw;
    }

    .button {
    color: purple;
    background-color: aquamarine;
    }
  </style>

</head>

<body>

  <div id='map'></div>
  <div id='map' style='width: 300px; height: 300px;'></div>
    <p>
      <script>
        mapboxgl.accessToken = 'MY_TOKEN';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11'
        });
    </script>

        <input type = "button" onclick = "myfunc()" value = "Test">
    </p>

CodePudding user response：

You should add a class property to the input field.

<input type="button"  onclick = "myfunc()" value ="Test">

CodePudding user response：

You have created the class, but it is not called inside the input button element. Note that the type of your input is, of course, "button", but you need to refers to the css class of that button, that you called as "button" also. Then, add:

In your input tag, like:

<input  type = "button" onclick = "myfunc()" value = "Test">

UPDATE: another way, if you don't want to use css, is to assign to all the input button elements the color that you want, adding a css like this:

    input[type="button"] {
         color: purple;
         background-color: aquamarine;
    }

But in this way, all the buttons of your application will be colored. It is better to use class in your case