You are not authorized to view comments.

การทำ search field แบบ Mac OS X

วันนี้ตื่นเช้าอีกแล้ว แต่ยังไม่มีอารมณ์ทำงานก็เลยทำในสิ่งที่อยากทำก่อน
ทำงานเขียนเว็บมาได้พักใหญ่ละ อยากได้ search field ที่หน้าตาคล้ายของ Mac OS X ดังนี้
search-os-x

ผมก็รู้นะว่าต้องเขียน code ดังนี้

<input type="search" />

สิ่งที่ได้จาก Safari จะเป็นแบบนี้
search-in-safari

แต่ส่วนพวก ie หรือ Firefox นั้น จะเป็นแบบนี้
search-in-firefox

เนื่องจากการแสดงผลของ search field ในแต่ละ browser ต่างกัน ผมจึงเปิดเว็บของ Apple เพื่อแกะ code ของเค้า แต่ด้วยความขี้เกียจจึงพึ่งพา Google (อีกแล้ว :P) ซึ่งก็ไม่ทำให้ผมผิดหวัง เพราะไปเจอเว็บ Brand Spanking New เค้าอธิบายไว้ละเอียดดี ทำให้ผมประหยัดเวลาไม่ต้องทำเองตั้งแต่แรก (อะไรที่มีให้ใช้แล้ว เราก็ใช้ไป ไม่ต้องเสียเวลาไปทำใหม่) เพื่อป้องกันการโหลด code ที่เค้าแจกไม่ได้นั้น ผมจึงขอโหลดแล้วเอามาปล่อยด้วยละกัน โหลดที่นี่

ผลการทดลองจาก code ที่ได้มา โดยเปิดด้วย Safari นั้นคือ
search-from-brand-spanking-new-open-with-safari

ส่วนการแสดงผลด้วย Firefox คือ
search-from-brand-spanking-new-open-with-firefox

ในที่สุดผมก็ได้ search field ที่ต้องการละ ดูดีกว่าปกติเยอะ