Кнопка индикации приоритета

Я хочу показать кнопку настройки приоритета, используя HTML, CSS and jQuery, чтобы установить приоритет как Высокий/Средний/Низкий, как показано на прикрепленных изображениях, и хочу показать выбранный приоритет полным словом в метке рядом с ним. Есть ли способ добиться этого?

Я попробовал ниже, но его дизайн не похож на то, что я прикрепил здесь.

$(function() {
  $('input:radio[name=priority]').change(function() {
    var id = $(this).attr("id");
    $("#text").html($(this).val());

    $('label[for=' + id + ']').checked = true;
  });
});

[type = "radio"]:checked + span:after {
border: none;
background-color: unset;
}
[type = "radio"]:not(:checked) + span:before {
border: none;  
}

input[type = "radio"] {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  /*border: 2px solid #1FBED6;*/
  background-color: #F1F1F1;
  -webkit-appearance: none;
  /*to disable the default appearance of radio button*/
  -moz-appearance: none;
}

input[type = "radio"]:focus {
  /*no need, if you don't disable default appearance*/
  outline: none;
  /*to remove the square border on focus*/
}

#h:checked {
  /*no need, if you don't disable default appearance*/
  background-color: red;
}

#m:checked {
  /*no need, if you don't disable default appearance*/
  background-color: orange;
}

#l:checked {
  /*no need, if you don't disable default appearance*/
  background-color: lightgreen;
}

input[type = "radio"]:checked~span:first-of-type {
  color: white;
}

label span:first-of-type {
  position: relative;
  left: -27px;
  font-size: 15px;
  color: black;
}

label span {
  position: relative;
  top: -12px;
}

<script class = "jsbin" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<label><input type = "radio" id = "h" name = "priority" value = "High priority"/><span>H</span></label>
<label><input type = "radio" id = "m" name = "priority" value = "Moderate priority"/><span>M</span></label>
<label><input type = "radio" id = "l" name = "priority" value = "Low priority"/><span>L</span></label>
<div id = "text"> </div>

Когда я реализую в своем коде, это выглядит следующим образом:

Да, это возможно, что вы уже пробовали?

— 07.02.2023 16:19

Проверьте этот URL для справки. это поможет вам начать. Укладку вам придется делать самостоятельно jsfiddle.net/8kLzj9gs

— 07.02.2023 16:51

javascript html jquery css

07.02.2023 16:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Создал для вас скрипку - https://jsfiddle.net/fuzp6mL9/2/

Отредактировал некоторые из ваших CSS, а также добавил оболочку для переключателей. Смело меняйте цвет на нужный вам.

ПРИМЕЧАНИЕ:

Вам нужно будет поместить обертку вокруг «#test» и «#text», чтобы очистить поплавки. Смотрите https://css-tricks.com/snippets/css/clear-fix/

<div id = "test">

  <label><input type = "radio" id = "h" name = "priority" value = "High priority" /><span>H</span></label>
  <label><input type = "radio" id = "m" name = "priority" value = "Moderate priority" /><span>M</span></label>
  <label><input type = "radio" id = "l" name = "priority" value = "Low priority" /><span>L</span></label>

</div>

<div id = "text"> </div>

$(function(){
    $('input:radio[name=priority]').change(function()
    {
      
       var id = $(this).attr("id");
        $("#text").html($(this).val());

      $('label[for='+id+']').checked = true;
    });
});

input[type = "radio"] {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin: 2px 0 0 2px;
  background-color: #F1F1F1;
  -webkit-appearance: none;
  -moz-appearance: none;

}

input[type = "radio"]:focus {
  outline: none;
}

#h:checked {
  background-color: red;
}

#m:checked {
  background-color: orange;
}

#l:checked {
  background-color: lightgreen;
}

input[type = "radio"]:checked ~ span:first-of-type {
  color: white;
}

label {
  width: 35px;

  display: inline-block;
  position: relative;
}

label span {
  position: absolute;
  top: 10px;
  left: 11px;
  font-size: 15px;
  color: black;
}

#text,
#test {
  float: left;

}

#text {

  margin-top: 14px;
  margin-left: 10px;
}

#test {
  padding: 6px;
  background-color: blue;
  border-radius: 26px;
}

<!DOCTYPE html>
<html>

  <head>
    <script class = "jsbin" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>

  </head>

  <body>
    <div id = "test">

      <label><input type = "radio" id = "h" name = "priority" value = "High priority" /><span>H</span></label>
      <label><input type = "radio" id = "m" name = "priority" value = "Moderate priority" /><span>M</span></label>
      <label><input type = "radio" id = "l" name = "priority" value = "Low priority" /><span>L</span></label>

    </div>


    <div id = "text"> </div>
  </body>

</html>

Я попробовал это решение. Но он также отображает внутренний круг. Я приложил изображение для того же вместе с вопросом. Не могли бы вы помочь мне скрыть это тоже.

— 07.02.2023 20:42

Добавьте следующее в стиль input[type = "radio"] CSS — -webkit-appearance: none; -moz-appearance: none; appearance: none;

— 07.02.2023 20:48

Вы заменили весь HTML/CSS на то, что я разместил в своем ответе? Если вы проверите скрипку, вы увидите, что это то, что вы хотели (минус правильный цвет фона). Я не понимаю новую проблему

— 07.02.2023 23:11

07.02.2023 18:21