Тег <b> используется для придания тексту полужирного начертания без изменения его семантики. Однако с течением времени рекомендуется использовать более семантически правильные теги для форматирования текста, такие как <strong> для выделения важного текста или <span> с применением CSS для стилизации.

Из двух примеров, которые вы предоставили, правильнее будет второй вариант, так как тег <b> предназначен для применения к содержимому внутри других тегов, в том числе к тексту внутри тега <p>. Однако не забывайте, что использование тега <b> не рекомендуется для стилизации текста в документах HTML5, поскольку он не несет никакой семантической нагрузки.

Вот пример правильного использования тега <b>:

<p>Этот текст <b>полужирный</b>.</p>

Если вы хотите стилизовать текст, важно помнить о семантике. Например, если текст действительно является важным, вы можете использовать тег <strong>. Если вам нужно изменить внешний вид текста для целей стилизации, лучше использовать CSS

Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.

Для стилизации можете воспользоваться например select2

*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }

    .wrapper {
      width: fit-content;
      padding: 50px;
      margin: 20px auto;
      outline: 2px dashed tomato;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-label {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: lightgrey;
      border: 1px solid grey;
      border-radius: 10px;
      box-shadow: 1px -2px 3px 2px rgba(0, 0, 0, 0.2) inset;
      background: linear-gradient(to right, blue, navy);
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: -50px;
      transition: background-position 0.2s ease;
    }

    .check-label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 23px;
      height: 23px;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      background-color: gainsboro;
      border: 5px solid dimgrey;
      border-radius: 50%;
      transition: left 0.25s ease;
    }

    #check:checked ~ .check-label {
      background-position: left;
    }

    #check:checked ~ .check-label::before {
      left: 27px;
    }