📋 Select Dropdown

<div class="select-group">
  <label class="select-label">Country</label>
  <div class="select-wrapper">
    <select class="select-field">
      <option>Russia</option>
      <option>United States</option>
      <option>United Kingdom</option>
      <option>Germany</option>
      <option>France</option>
    </select>
    <span class="select-arrow">▼</span>
  </div>
</div>

.select-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 280px;
}
.select-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
}
.select-wrapper {
  position: relative;
}
.select-field {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
}
.select-field:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #999;
  pointer-events: none;
}

<div class="select-icon">
  <span class="select-icon-symbol">🌍</span>
  <select class="select-icon-field">
    <option>English</option>
    <option>Spanish</option>
    <option>French</option>
    <option>German</option>
  </select>
  <span class="select-icon-arrow">▼</span>
</div>

.select-icon {
  position: relative;
  width: 280px;
}
.select-icon-symbol {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
}
.select-icon-field {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 2.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
}
.select-icon-field:focus {
  border-color: #667eea;
}
.select-icon-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #999;
  pointer-events: none;
}

<div class="select-grad">
  <select class="select-grad-field">
    <option>Premium Plan</option>
    <option>Basic Plan</option>
    <option>Enterprise Plan</option>
  </select>
  <span class="select-grad-arrow">▼</span>
</div>

.select-grad {
  position: relative;
  width: 280px;
}
.select-grad-field {
  width: 100%;
  padding: 0.85rem 2.5rem 0.85rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.select-grad-field:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.select-grad-field option {
  background: white;
  color: #1a1a2e;
}
.select-grad-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: white;
  pointer-events: none;
}