Form ng CSS

Sa pamamagitan ng CSS, maaaring mapabuti nang lubha ang hitsura ng HTML form:

Try It Yourself

Iset ang estilo ng input field

Gumamit ng width property upang itakda ang lapad ng input field:

Mga halimbawa

input {
  width: 100%;
}

Try It Yourself

Ang halimbawa na ito ay para sa lahat ng <input> na elemento. Kapag gusto mong itakda ang estilo ng partikular na uri ng input, maaari mong gamitin ang attribute selector:

  • input[type=text] - Magpili lamang ng text field
  • input[type=password] - Magpili lamang ng password field
  • input[type=number] - Magpili lamang ng number field
  • at iba pa...

pad sa input box

Gumamit ng padding property upang magdagdag ng espasyo sa loob ng text field.

Paalala:Kapag may maraming input, maaring kailangan mong idagdag ang margin upang magdagdag ng mas maraming luwang sa labas ng mga ito:

Mga halimbawa

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Try It Yourself

Pansin na inilagay namin ang box-sizing property ay inilagay sa border-boxPara siguraduhin na kasama sa kabuuan ng luwang at taas ng elemento ang padding at huling border.

Sa aming CSS Box Sizing Sa kanyang kabanata na ito, matututunan ka tungkol sa box-sizing magkaalam ng higit pang kaalaman sa property.

input box na may gilid

Gumamit ng border property upang baguhin ang liwanag at laki ng border, at gamitin ang border-radius property upang magdagdag ng bulu-buluhan sa gilid:

Mga halimbawa

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Try It Yourself

Kapag kinakailangan lamang ang ibabaw na border, gamitin ang border-bottom Property:

Mga halimbawa

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Try It Yourself

maikling input box

Gumamit ng background-color property upang magdagdag ng background color sa input, at gamitin ang color property upang baguhin ang kulay ng teksto:

Mga halimbawa

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Try It Yourself

input box na nakatarget

Sa normal na kalagayan, ang ilang browser ay magpapakita ng asul na outline sa paligid ng input box kapag nakatarget (click). Maaari mong gamitin ang pagdagdag ng outline: none; para malinawin ang ganyang pag-uugali.

Gumamit ng :focus Selector maaring maglagay ng estilo kapag ang input field ay nagiging focus:

Mga halimbawa 1

input[type=text]:focus {
  background-color: lightblue;
}

I-click ang text box sa ibaba:

Try It Yourself

Mga halimbawa 2

input[type=text]:focus {
  border: 3px solid #555;
}

I-click ang text box sa ibaba:

Try It Yourself

Input box na may ikon/image

Kung gusto mong magkaroon ng ikon sa input box, gamitin ang background-image katangian, at kasama ito ang background-position Ang mga katangian na ito ay ipinapakita kasama ang

Mga halimbawa

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Try It Yourself

Search input na may animation

Sa kasong ito, gumamit kami ng CSS transition Para sa pag-set ng animasyon ng pagbabago ng lapad ng input text na nanggagaling sa search input na nanggagaling sa CSS Transition Sa isang kabanata, natutunan mo ang higit pang kaalaman transition kaalaman ng mga katangian.

Mga halimbawa

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Try It Yourself

I-set ng estilo ng text area

Paalala:Gumamit ng resize Ang mga katangian na ito ay nagpahintulot sa pag-iwas sa pag-aayos ng textareas (disable the 'grabber' at the bottom right):

Mga halimbawa

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Try It Yourself

I-set ng estilo ng pagpipilian ng menu

Mga halimbawa

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Try It Yourself

I-set ng estilo ng pindutan na pagsasagot

Mga halimbawa

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Tip: Use width: 100% to achieve full-width buttons */

Try It Yourself

For more knowledge on how to set button styles with CSS, please learn our CSS Button Tutorial.

Responsive Menu

Please adjust the size of the TIY editor window to view the effect. When the screen width is less than 600 pixels, make the two columns stack vertically instead of horizontally.

Advanced: The following examples use Media Query To create a responsive form. In the next chapter, you will learn more related knowledge.

View Responsive Menu