这能解决你的问题吗？
只需在输入中删除此checked。
所以，它应该看起来像这样。

.game-board {
    display: block;
    font-size: 1.5rem;
    text-align: center;
    color: #dcdcdc;
}

label::before {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    content: '-';
    margin-right: 20px;
    font-size: 24px;
    font-weight: bold;
}

input[type="checkbox"] {
    display: none;
}

.football {
    width: 90%;
}

.game-board input[type="checkbox"]:checked+label::before {
    content: '+';
}

.game-board input[type="checkbox"]:checked+label .football {
   max-width: 0px;
}`enter code here`

<div class="game-board">
    <input id="field" type="checkbox"/>
    <label for="field"><img class="football" src="img/Saints_Football_field.png" alt="Home Field"></label>
</div>

不是100%清楚你的意图或愿望在这里。
如果你想切换图像或实际的复选框，你想要的点击不是很清楚，但我相信你可以以此为起点。（也许你的意思是在+/-中 Package 复选框？如果需要，很容易交换图像和div。
你可能应该使用网格，这样你就可以在X和Y上你需要的地方放置东西。这里我使用了带有名称的区域，并在CSS中放置了一些适当的注解;我在+/-上使用了颜色，这样您就可以看到它反映了单击图像时的复选框切换-这是因为标签 Package 了图像，并在上面有for=""。
我添加了一些丑陋的边界和颜色的视觉清晰度是什么地方。

* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
}

.board-container {
  display: grid;
  /* super center the game board */
  place-items: center;
}

.game-board {
  display: grid;
  grid-template-areas: " . field" "plus field" " .   field";
  grid-gap: 0.5rem;
  grid-template-columns: 1fr auto;
  grid-auto-rows: 1fr auto 1fr;
  align-items: start;
  color: #dcdcdc;
  font-weight: 600;
  border: solid 1px blue;
}

input[type="checkbox"].field-toggle {
  grid-area: cbx;
  /* hidden checkbox but click "field" checks/unchecks */
  display: none;
  /* make it obvious it is hidden */
  border: solid 8px cyan;
}

.plus-minus {
  grid-area: plus;
  font-size: 2.5rem;
  border: solid 1px pink;
  /* keeps +/- from jumping the width since they are different */
  width: 1em;
}

label.field-label {
  grid-area: field;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-board input[type="checkbox"].field-toggle~.plus-minus::before {
  /* these just show the +/- mirror the checkbox state */
  content: '-';
  color: green;
}

.game-board input[type="checkbox"].field-toggle:checked~.plus-minus::before {
  /* these just show the +/- mirror the checkbox state */
  content: '+';
  color: red;
}

.football-field {
  width: 600px;
  height: 330px;
  background-color: #00FF0011;
  /* get the alt text vertial aligned match height; and centered */
  line-height: 330px;
  text-align: center;
}

<div class="board-container">
  <div class="game-board">
    <input class="field-toggle" id="field" type="checkbox" checked />
    <label class="field-label" for="field"><img class="football-field" src="img/Saints_Football_field.png" alt="Home Field"/></label>
    <div class="plus-minus">&nbsp;</div>
  </div>
</div>