Textfield PlaceHolder as Icon

Developer
Shayne Trosdahl
Size
2,334 Kb
Views
18,216
  1. Textfield PlaceHolder as Icon Previews
  2. Textfield PlaceHolder as Icon HTML Codes
  3. Textfield PlaceHolder as Icon CSS Codes
  4. Textfield PlaceHolder as Icon JS Codes

How do I make an textfield placeholder as icon?

A small demo showing how to make placeholder text display with icon instead of text. What is a textfield placeholder as icon? How do you make a textfield placeholder as icon? This script and codes were developed by Shayne Trosdahl on 18 November 2022, Friday.

Textfield PlaceHolder as Icon Previews
IQ Test

Textfield PlaceHolder as Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Textfield PlaceHolder as Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="http://cdn.sencha.io/touch/sencha-touch-2.4.0/sencha-touch-all.js"></script>
<link href="http://cdn.sencha.io/touch/sencha-touch-2.4.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"> <script src="js/index.js"></script>
</body>
</html>

Textfield PlaceHolder as Icon - Script Codes CSS Codes

.x-field-with-icon-placeholder input::-webkit-input-placeholder, .x-field-with-icon-placeholder isindex::-webkit-input-placeholder { font-family: 'Pictos'; /* OTHER CSS/SCSS STYLES IF NEEDED */
}

Textfield PlaceHolder as Icon - Script Codes JS Codes

Ext.setup({	onReady: function () {	Ext.Viewport.add({	xtype: 'container',	layout: {	type:'hbox',	pack: 'center',	align: 'center'	},	defaults: {	margin: '2em'	},	items: [{	xtype: 'textfield',	ui: 'with-icon-placeholder', // Keeps the icon placeholder specific to textfields with this class	placeHolder: 'a',	label: 'Label'	}]	});	}
});
Textfield PlaceHolder as Icon - Script Codes
Textfield PlaceHolder as Icon - Script Codes
Home Page Home
Developer Shayne Trosdahl
Username Trozdol
Uploaded November 18, 2022
Rating 3
Size 2,334 Kb
Views 18,216
Do you need developer help for Textfield PlaceHolder as Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shayne Trosdahl (Trozdol) Script Codes
Name
SVG Logo Animation
1em Sizing Side-by-Side Comparison
Sencha Touch 2.3.1 Basic Grid Example
Viewport Text Width CSS
Sencha Touch Button Icon Size CSS
Sencha Touch Grid Text Wrap Test
Sencha Touch Bar Chart Add ons
CSS Size Value Comparison of 10
Push to Nested Array
List Item
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!