I am using a HTML5 datetime-local picker, is there anyway I can place a custom placeholder text?
HTML Code:
<input id="dt" onchange="dateTimeFormat()" class="input" type="datetime-local">
By default it looks like this:
Theres not many resources into styling this, so any help is much appreciated!
TIA
I think might solve your problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Yess You can use this:-
<input id="dt" class="input" onfocus="(this.type='date')" placeholder="hello">
use onfocus="(this.type='date')" and then you can use placeholder as per you wise
Or
You can use this CSS trick to do this:-
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
after attaching this to your input date, then you can use the placeholder with the dates
For example:-
this is an HTML code with the above-mentioned CSS code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
</style>
</head>
<body>
<input type="date" name="date" id="date" placeholder="Hello">
</body>
</html>
Related
I'm trying to make an element draggable using JQuery
I tried this but it didn't work because the scripts are not working and it looks like there isn't a link. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
it looks like you did not have the files js/jquery-1.3.2.min.js and js/jquery-ui-1.7.1.custom.min.js present in your file system. I have replaced the files with CDN.
Find CDN here:
https://cdnjs.com/libraries/jquery
https://cdnjs.com/libraries/jqueryui
It doesn't necessarily need to be written after page load. But it can increase initial load time in some cases!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
The order in your code plays an important role in things .. You need to load your scripts AFTER the DOM loads .. Also -- Religiously view your DevTools F12 -- The console gives vital information about DOM elements not being found, loaded etc etc ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
</body>
</html>
Can't override and reduce the height of a bootstrap textbox.
<div class="form-group row">
<label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return keyval(event)" onkeyup="return valkey(event)" name="num3" required="required"><span id="rspan" class="rspan"><span>⚠</span>Enter a numeric value > 0 and ≤ 90</span></input>
</div>
The above is my input tag and below is the css for class = "ps"
.ps{
min-height: 2%;
}
I can't increase or reduce the height. when it comes to the width, I can increase it but can't reduce it.
How do i solve this?
I have tried your code. In my opinion, you should try with id. It may happen that the CSS of the col-xl-1 class is overwritten on your CSS. Or else what you can try is !important to emphasize your CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
#txtBox1 {
margin: 10px;
min-height: 50px;
}
</style>
</head>
<body>
<form>
<input type="text" class="col-xl-1 ps" id="txtBox1">
<button class="btn btn-primary">Submit</button>
</form>
</body>
</html>
So I'm using bootstrap and I'm trying to remove the blue outline around the custom switch button when I click on it, but I can't remove it, I'm using chrome. Here is my code:
#test:focus,
#test:active,
input:focus,
input:active
{
outline: none !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
hello how are you doing
<div class="custom-control custom-switch mx-auto shadow-none">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label id="test" class="custom-control-label" for="customSwitches"></label>
</div>
</body>
</html>
You have to remove it on the following CSS selector:
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none;
}
https://www.codeply.com/go/eAUIJbpS2I
Additionally, if you want to remove the light blue border from the switch when focused use:
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: #adb5bd;
}
In this code the text is printing on the side of the image but I need on the image so please help me to finish. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<img src="DHONI.jpg">{{Username}}
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
</script>
</body>
</html>
You need to wrap the {{ Username }} in a <div> and give it position: absolute. Also wrap the img and this div inside a parent div with position: relative. See code below:
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
.ctn {
position: relative;
}
.u-name {
position: absolute;
top: 5px;
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<div class="ctn">
<img src="https://via.placeholder.com/150">
<div class="u-name">{{Username}}</div>
</div>
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
</script>
</body>
</html>
I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>
try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}