Question 229452 in Html Question posted in
Some basic documentation can be found here.

How can i write a code in html and css for the below input field along with label

enter image description here
How can I write code in HTML and CSS for the below input field along with the label?
Please help me to achieve the above one.

<div class="form-group">
  <label for="tripType">What are you looking for?</label>
  <select class="select" type="select" id="tripType" placeholder="Backpacking Trips" name="tripType">
    <option value="Backpacking Trips">Backpacking Trips</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
</div>

<button type="submit">Submit</button>

Provide suggestions to do it. I’m new to it.

Tags:

2

Answers


  1. 0

    I Made a quick one for ya, I hope it helps:

      <label for="options">Backpacking Trips</label>
  <select id="options" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
    Login or Signup to reply.
  2. 0

    The easiest way to create a label which border encompasses the input (select box) with a border (that does not transpares beneath the text) would be to use a <fieldset> HTML element and its <legend> tag:

    body {
  font: 16px/1 sans-serif;
}

fieldset {
  border-radius: 2rem;
  border: 1px solid #5c819c;
}

fieldset select {
  width: 100%;
  border: 0;
  background: transparent;
  color: #5c819c;
  font-size: 1rem;
}
    <fieldset>
  <legend>What are you looking for?</legend>
  <select class="select" type="select" id="tripType" placeholder="Backpacking Trips" name="tripType">
    <option value="Backpacking Trips">Backpacking Trips</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search