CODEWITHSUNDEEP
htmlcss
tellme Oberlin
tellme Oberlin

Reputation: 37

How to add text onto a circle using CSS and HTML?

Right now this is my timer

I want the timer to look like the picture below with the word "Stop"

The above is how my timer currently looks. I want the word "STOP" to be added to my timer but I don't know how. Keep in mind that it's actually an input with type text with the text being the time itself. I want to add the word stop on top of the time. HTML code:

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

CSS code:

  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;
}

Upvotes: 2

Views: 1170

Answers (2)

Kam Dane
Kam Dane

Reputation: 60

I can suggest you this solution, by using flex css, as extra, I provided a small JS to get timer.

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>

Upvotes: 0

Spectric
Spectric

Reputation: 31987

You can use absolute positioning:

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>

Upvotes: 2

Related Questions