Question

我如何更改个性化侧边栏中的按钮的颜色？

这是我的html文件，我不知道如何更改每个按钮的颜色，我有我想要的每种颜色的颜色代码

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 

  </head>

  <body>
    Hello, dear I-Care's member!<br/><br/>
    Ajouter des jours Inexistants!<br/>
    <input type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" /><br/><br/>
    Ajouter des jours Mensuel!<br/>   
    <input type="button" value="Mensuel" onclick="google.script.run.JoursMensuel()" /><br/><br/>
    Ajouter des jours Férié!<br/>    
    <input type="button" value="Férié" onclick="google.script.run.JoursFerie()" /><br/><br/>
    Ajouter des jours de Congé!<br/>    
    <input type="button" value="Congé" onclick="google.script.run.JoursConge()" /><br/><br/>
    Ajouter des jours Possible!<br/>    
    <input type="button" value="Possible" onclick="google.script.run.JoursPossible()" /><br/><br/>
    Ajouter des jours en Plus!<br/>    
    <input type="button" value="Plus" onclick="google.script.run.JoursEnPlus()"/><br/><br/>
    Ajouter des jours Weekend!<br/>    
    <input type="button" value="Weekend" onclick="google.script.run.JoursWeekend()" /><br/><br/>
    Remettre à zéro!<br/>    
    <input type="button" value="Blanc" onclick="google.script.run.JoursBlanc()" /><br/><br/><br/>
    <input type="button" value="Close" onclick="google.script.host.close()" />
    <button class="share">Share</button>
    <button>Close</button>
  </body>
</html>

Answer 1

那么您可以使用CSS为按钮着色。

假设您在每个按钮上放了一个类，以您想要的颜色命名。

<input type="button" class="red" value="Inexistants" onclick="google.script.run.JoursInexistants()" />
    <p>Ajouter des jours Mensuel!</p> 
<input type="button" class="blue" value="Mensuel" onclick="google.script.run.JoursMensuel()" />
    <p>Ajouter des jours Férié!</p>    
<input type="button" class="yellow" value="Férié" onclick="google.script.run.JoursFerie()" />
    <p>Ajouter des jours de Congé!</p>    

...

input {
    display: block;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

您还可以使用CSS进行其他一些改进。例如，我放display: block和而不是很多 。

您也可以在表单中使用<for></for>代替。

Answer 2

使用inline CSS指定background-color。

<input style="background-color:#4CAF50" type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" />

您还可以考虑一些其他方式来指定样式，例如，如果您希望多个按钮具有相同的颜色，则这可能会更有帮助。（实际上，强烈建议这样做。但是，不需要这样做，尤其是在您对概念不太熟悉的情况下。有时最好只是使它看起来像您想要的方式，然后使其“正确”。）

https://www.w3schools.com/css/css_howto.asp

我认为您还需要将文档顶部的链接标记移动到<head></head>标记内，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>

  <body>
    Hello, dear I-Care's member!<br/><br/>
    Ajouter des jours Inexistants!<br/>
    <input type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" /><br/><br/>
    Ajouter des jours Mensuel!<br/>   
    <input type="button" value="Mensuel" onclick="google.script.run.JoursMensuel()" /><br/><br/>
    Ajouter des jours Férié!<br/>    
    <input type="button" value="Férié" onclick="google.script.run.JoursFerie()" /><br/><br/>
    Ajouter des jours de Congé!<br/>    
    <input type="button" value="Congé" onclick="google.script.run.JoursConge()" /><br/><br/>
    Ajouter des jours Possible!<br/>    
    <input type="button" value="Possible" onclick="google.script.run.JoursPossible()" /><br/><br/>
    Ajouter des jours en Plus!<br/>    
    <input type="button" value="Plus" onclick="google.script.run.JoursEnPlus()"/><br/><br/>
    Ajouter des jours Weekend!<br/>    
    <input type="button" value="Weekend" onclick="google.script.run.JoursWeekend()" /><br/><br/>
    Remettre à zéro!<br/>    
    <input type="button" value="Blanc" onclick="google.script.run.JoursBlanc()" /><br/><br/><br/>
    <input type="button" value="Close" onclick="google.script.host.close()" />
    <button class="share">Share</button>
    <button>Close</button>
  </body>
</html>

Google AppsScript中的彩色按钮

2 个答案: