Блог

Главная - Вопросы по программированию - Как удалить вертикальную линию из стиля индикатора выполнения html

Как удалить вертикальную линию из стиля индикатора выполнения html

#html #css #styles #progress-bar

#HTML #css #стили #индикатор выполнения

Вопрос:

У меня на веб-странице появляется индикатор выполнения. Код

 progress {
  display: inline-block;
  vertical-align: baseline;
}

.progress-yellow {
  color: #F4DD50;
  border-radius: 4px;
  height: 8px;
  border-left: 4px solid #F4DD50;
  border-right: 4px solid grey;
}  
 <progress class="progress-yellow" max="100" value="42.0"></progress>

Пользовательский интерфейс выглядит следующим образом:
введите описание изображения здесь

Как видно на изображении, на индикаторе выполнения есть вертикальная линия, я не уверен, как ее удалить. Это происходит, когда я увеличиваю или уменьшаю масштаб веб-страницы, что странно. Есть идеи?

Ответ №1:

У вас есть граница слева. Вот почему у вас есть граница в вашем индикаторе выполнения. Вы можете попробовать этот код, если хотите создать индикатор выполнения в стиле радиуса границы.

Шаг 1:

        .progress-bg { 
            background-color: #F4DD50;
            padding: 1%; 
            border-radius: 15px; 
        } 
        
        .progress-width { 
            width: 30%; 
        } 
        
        .progress { 
            background-color: grey; 
            width: 80%; 
            border-radius: 15px; 
        } 
          
 <div class="progress">
  <div class="progress-bg progress-width"></div> 
</div>

Шаг 2:

 .progress-yellow {
  height: 8px;
  border-radius: 30px;
  width:40%;
}
progress[value]::-webkit-progress-bar {
  background-color: grey;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:#F4DD50;
}  
 <progress class="progress-yellow" max="100" value="42.0"></progress>

Комментарии:

1. Однако у меня есть еще один вопрос: что, если комбинация значение / цвет является динамической, что в моем случае так и есть. И я хочу изменить цвет в зависимости от значения. для менее 30 он должен быть зеленым, а выше 70 — красным.

2. вы можете использовать условие if-else

3. progress[value]::-webkit-progress-value в этом классе вы можете добавить условие if else и изменить цвет фона

4. как использовать if-else в css? если мы не хотим создавать несколько индикаторов прогресса на странице html

5. какой язык вы используете для своих целей разработки?

Ответ №2:

Причина border-left: 4px solid #F4DD50; вашей проблемы. Вам нужно найти обходной путь для вашего радиуса границы.