วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ

[jamepiyawat]

พอดีว่าผมต้องการจะใส่พื่นหลังให้กับ text box เพื่อเป็นการแสดงถึงตัวอย่างในการใช้งานครับ แต่ผมไม่ทราบวิธีทำครับ

จะทำอย่างไรให้ text box นั้นมีพื้นหลัง และถ้าเราคลิกที่ text box นั้นแล้วภาพพื้นหลังจะหายไปครับ

Selection_999(1305).png (7.98 KiB) Viewed 1929 times

[thatsawan]

หมายถึง placeholder หรือป่าวค่ะ

โค้ด: เลือกทั้งหมด

<input name="keywords" id="keywords" type="search" maxlength="128" title="คีย์เวิร์ดสำหรับค้นหา" class="inputbox search tiny" size="20" value="" placeholder="ค้นหา">

placeholder คืออะไร
https://www.mindphp.com/forums/viewtopic.php?t=24026

ตัวอย่างการใช้งาน Class placeholder
https://www.mindphp.com/forums/viewtopic ... 76&t=19253

[jamepiyawat]

placeholder สามารถแสดงข้อความได้แค่บรรทัดเดียว ครับแต่ข้อความตัวอย่างของผมจำเป็นจะต้องแสดงข้อความหลายบรรทัดแบบนี้ครับ

Selection_999(1306).png (9.86 KiB) Viewed 1924 times

ผมจึงต้องทำให้ text box มีภาพพื้นหลังเพื่อจะทำให้ผู้ใช้เข้าใจวิธีการกรอกข้อมูลลง text box นี้ครับ

[thatsawan]

เราก็ใส่ class เเละกำหนดภาพใน class ก็ได้

โค้ด: เลือกทั้งหมด

.textInput {
 background: transparent;
 background-image: url(Images/textBg.jpg)
} 

โค้ด: เลือกทั้งหมด

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

https://www.w3schools.com/howto/tryit.a ... nim_search

[jamepiyawat]

ทำได้แล้วครับ ขอบคุณครับ

โดยการกำหนด css ให้ใส่พื้นหลัง text box แบบนี้ครับ

โค้ด: เลือกทั้งหมด

textarea[type="text"]{
  background-image: url('imgdataset.png');
  background-repeat : no-repeat;
}

Selection_999(1309).png (16.75 KiB) Viewed 1911 times