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

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1318
Joined: 21/05/2019 10:45 am

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

Post by jamepiyawat » 22/10/2019 5:19 pm

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

จะทำอย่างไรให้ text box นั้นมีพื้นหลัง และถ้าเราคลิกที่ text box นั้นแล้วภาพพื้นหลังจะหายไปครับ
Selection_999(1305).png
Selection_999(1305).png (7.98 KiB) Viewed 241 times

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19364
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 22/10/2019 5:23 pm

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

Code: Select all

<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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1318
Joined: 21/05/2019 10:45 am

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

Post by jamepiyawat » 22/10/2019 5:27 pm

placeholder สามารถแสดงข้อความได้แค่บรรทัดเดียว ครับแต่ข้อความตัวอย่างของผมจำเป็นจะต้องแสดงข้อความหลายบรรทัดแบบนี้ครับ
Selection_999(1306).png
Selection_999(1306).png (9.86 KiB) Viewed 236 times
ผมจึงต้องทำให้ text box มีภาพพื้นหลังเพื่อจะทำให้ผู้ใช้เข้าใจวิธีการกรอกข้อมูลลง text box นี้ครับ

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19364
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 22/10/2019 5:34 pm

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

Code: Select all

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

Code: Select all

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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1318
Joined: 21/05/2019 10:45 am

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

Post by jamepiyawat » 22/10/2019 6:03 pm

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

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

Code: Select all

textarea[type="text"]{
  background-image: url('imgdataset.png');
  background-repeat : no-repeat;
}
Selection_999(1309).png
Selection_999(1309).png (16.75 KiB) Viewed 223 times

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 6 guests