如何使用 CSS 和 HTML 在圓圈上添加文本？

Question

以上是我的計時器當前的外觀。 我希望將“停止”一詞添加到我的計時器中，但我不知道怎么做。 請記住，它實際上是一個帶有文本類型的輸入，文本是時間本身。 我想在時間的頂部添加停止一詞。 HTML 代碼：

<input type="text" name="" value="Start" id="">

CSS 代碼：

  input[type=text]:focus {
  height: 150px;
  width: 150px;
  background-color:  white;
  caret-color: transparent;
  border-radius: 50%;
  display: inline-block;
  border: none;
  border-style: none;
  text-align: center;
  font-size: x-large;
  box-shadow: inset 0px 0px 0px 10px #FF8D3A;
}

Answer 1

您可以使用絕對定位：

 input[type=text]:focus { height: 150px; width: 150px; background-color: white; caret-color: transparent; border-radius: 50%; display: inline-block; border: none; border-style: none; text-align: center; font-size: x-large; box-shadow: inset 0px 0px 0px 10px #FF8D3A; } input[type=text]:focus + .notice{ display:block; } .group { position: relative; } .notice { color: #FF8D3A; font-size: 30px; position: absolute; left: 40px; top: 30px; display:none; }

 <div class="group"> <input type="text" name="" value="Start" id=""> <span class="notice">STOP</span> </div>

Answer 2

我可以通過使用 flex css 向您建議這個解決方案，另外，我提供了一個小 JS 來獲取計時器。

 function refresh() { var t = 1000; // rafraîchissement en millisecondes setTimeout('showDate()', t); } function showDate() { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if (h < 10) { h = '0' + h; } if (m < 10) { m = '0' + m; } if (s < 10) { s = '0' + s; } document.getElementById('horloge').value = h + ':' + m + ':' + s; refresh(); }

 .circle { display: flex; justify-content: center; height: 150px; width: 150px; border-radius: 100%; border: none; text-align: center; font-size: x-large; box-shadow: inset 0px 0px 0px 10px #FF8D3A; } .circle div { align-self: center; } .circle b { color: #FF8D3A; } .circle input { width:70%; border:none; text-align:center; font-size: x-large; }

 <html> <head> <body onload="showDate()"> <div class="circle"> <div> <b>STOP</b> <input type="text" value="00:39:43" id="horloge" /> </div> </div> </body> </head> </html>

如何使用 CSS 和 HTML 在圓圈上添加文本？

問題描述

2 個解決方案

解決方案1
2 已采納 2021-07-01 23:59:24

解決方案2
0 2022-07-12 01:49:32

如何使用 CSS 和 HTML 在圓圈上添加文本？

問題描述

2 個解決方案

解決方案1 2 已采納 2021-07-01 23:59:24

解決方案2 0 2022-07-12 01:49:32

解決方案1
2 已采納 2021-07-01 23:59:24

解決方案2
0 2022-07-12 01:49:32