พอดีว่าผมต้องการจะใส่พื่นหลังให้กับ text box เพื่อเป็นการแสดงถึงตัวอย่างในการใช้งานครับ แต่ผมไม่ทราบวิธีทำครับ
จะทำอย่างไรให้ text box นั้นมีพื้นหลัง และถ้าเราคลิกที่ text box นั้นแล้วภาพพื้นหลังจะหายไปครับ
วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ
Moderator: mindphp
- jamepiyawat
- PHP VIP Members
- โพสต์: 2008
- ลงทะเบียนเมื่อ: 21/05/2019 10:45 am
- thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
- ติดต่อ:
Re: วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ
หมายถึง placeholder หรือป่าวค่ะ
placeholder คืออะไร
https://www.mindphp.com/forums/viewtopic.php?t=24026
ตัวอย่างการใช้งาน Class placeholder
https://www.mindphp.com/forums/viewtopic ... 76&t=19253
โค้ด: เลือกทั้งหมด
<input name="keywords" id="keywords" type="search" maxlength="128" title="คีย์เวิร์ดสำหรับค้นหา" class="inputbox search tiny" size="20" value="" placeholder="ค้นหา">
https://www.mindphp.com/forums/viewtopic.php?t=24026
ตัวอย่างการใช้งาน Class placeholder
https://www.mindphp.com/forums/viewtopic ... 76&t=19253
- jamepiyawat
- PHP VIP Members
- โพสต์: 2008
- ลงทะเบียนเมื่อ: 21/05/2019 10:45 am
Re: วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ
placeholder สามารถแสดงข้อความได้แค่บรรทัดเดียว ครับแต่ข้อความตัวอย่างของผมจำเป็นจะต้องแสดงข้อความหลายบรรทัดแบบนี้ครับ
ผมจึงต้องทำให้ text box มีภาพพื้นหลังเพื่อจะทำให้ผู้ใช้เข้าใจวิธีการกรอกข้อมูลลง text box นี้ครับ
ผมจึงต้องทำให้ text box มีภาพพื้นหลังเพื่อจะทำให้ผู้ใช้เข้าใจวิธีการกรอกข้อมูลลง text box นี้ครับ
- thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
- ติดต่อ:
Re: วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ
เราก็ใส่ class เเละกำหนดภาพใน class ก็ได้
https://www.w3schools.com/howto/tryit.a ... nim_search
โค้ด: เลือกทั้งหมด
.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;
}
- jamepiyawat
- PHP VIP Members
- โพสต์: 2008
- ลงทะเบียนเมื่อ: 21/05/2019 10:45 am
Re: วิธีทำให้ text box มีภาพพื้นหลัง ต้องทำอย่างไร ครับ
ทำได้แล้วครับ ขอบคุณครับ
โดยการกำหนด css ให้ใส่พื้นหลัง text box แบบนี้ครับ
โดยการกำหนด css ให้ใส่พื้นหลัง text box แบบนี้ครับ
โค้ด: เลือกทั้งหมด
textarea[type="text"]{
background-image: url('imgdataset.png');
background-repeat : no-repeat;
}
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ ทำให้ ตรง Category แสดงหัวข้อหมวดหมู่อันเดียวอย่างไรครับ
โดย Patipat » 07/08/2019 4:00 pm » ใน Joomla Development - 6 ตอบกลับ
- 1220 แสดง
-
โพสต์ล่าสุด โดย Patipat
07/08/2019 4:57 pm
-
-
-
โพสต์ใหม่ อยากทราบวิธี ทำให้ แพนทที่สร้างขึ้นมาสามารถทำงานได้อย่างอัตโนมัติ
โดย Ittichai_chupol » 10/04/2020 10:22 pm » ใน Programming - PHP - 6 ตอบกลับ
- 1492 แสดง
-
โพสต์ล่าสุด โดย Sirayu
03/06/2020 9:59 am
-
-
-
โพสต์ใหม่ ทำให้ หน้าเว็บโหลด Google Map แบบรวดเร็วกว่าแต่ก่อน
โดย mindphp » 17/02/2016 9:26 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 1156 แสดง
-
โพสต์ล่าสุด โดย mindphp
17/02/2016 9:26 pm
-
-
-
โพสต์ใหม่ ทำให้ Banner แสดงบนหน้าเว็บโดยใช้ Module
โดย Auttasti » 06/08/2019 7:10 pm » ใน Joomla user Guide Knowledge - 0 ตอบกลับ
- 2822 แสดง
-
โพสต์ล่าสุด โดย Auttasti
06/08/2019 7:10 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 43