Styling the Title Inside Input Tag - html

is there any way to Style the Title inside The Tag?
i mean for an example :
<input type= "submit" id="submit" title= "submit your form">
i want to know is it possible to style this title inside the input tag?

No. But you may try some trick with it.
$(document).ready(function(){
var old_title;
$('.title-styled').on('mouseover', function(){
old_title = $(this).attr('title');
$('.title-message').html($(this).attr('title')).css('visibility', 'visible');
$(this).attr('title', '');
});
$('.title-styled').on('mouseleave', function(){
$(this).attr('title', old_title);
$('.title-message').html('').css('visibility', 'hidden');
});
});
.title-message{
visibility: hidden;
padding: 10px;
border: solid 1px #f9f9f9;
box-shadow: 3px 3px 3px #1a1a1a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type= "submit" id="submit" class="title-styled" title= "submit your form">
<span class="title-message"></span>
Other option:
If you want to use a jQuery plugins, visit this link.

Related

Using a tag as submit button

How can I use a tag as submit button in my form (Is just matter of design for me and not functionality)
My form
<form action="{{route('wishlist.store')}}" method="post">
{{csrf_field()}}
<input type="text" name="user_id" value="{{Auth::user()->id}}" hidden>
<input type="text" name="product_id" value="{{$product->id}}" hidden>
<button type="submit" class="wish-list">
<i class="fas fa-heart"></i>
</button>
</form>
All the issue I have is that gray box behind my font icon which is caused by <button> so I need to use <a> tag.
I also tried to change my button with a tag and added something like:
$(document).on("click","#sendwish",function(){
$('form').submit(function(evt){
evt.preventDefault();
var url = $('form').attr("action");
var formData = $('form').serialize();
$.post(url, formData, function(response){
console.log(response);
});
});
});
but it didn't work.
any idea?
Perhaps you can just overwrite default styles on the button?
.wish-list {
background: none;
border: none;
padding: 0;
margin: 0;
}
or if need be:
<button style="background: none; border: none; padding: 0; margin: 0;"></button>
Give your a form an ID as well as the link and call the onclick function to then submit the form.
Let's say you have a form called with an ID of SubmitMe and a span / div with the ID of ClickMe.
Example:
document.getElementById("#ClickMe").onclick = function(){
document.getElementById("#SubmitMe").submit();
}
Just so you know this, this will submit what ever is the action on the "SubmitMe" form.

How to end searched url with &*

I am trying to make a searh bar linking up to google.no (norway). when you search for music you get this URL: https://www.google.no/#q=music&*. My question is how i can get the (& *) at the end of a search.
.search {
border: solid 1px grey;
border-radius: 3px;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
font-size: 15px;
margin: 15px;
}
<form class="form" action="http://www.google.no/#q=">
<input class="search" name="q" placeholder="Search...">
</form>
You cannot submit to this Google page, because it has an anchor # in it. This means, it has not the regular GET format, you would get, if you just submit a form to this URL. You have to calculate the correct URL in JavaScript or on the back-end side.
If you want to create the correct URL with JavaScript, you can use the function encodeURIComponent(url) to escape the parameter.
Here is an example:
var searchBox = document.querySelector('.search');
var form = document.querySelector('.form');
form.addEventListener('submit', function(event) {
var value = searchBox.value;
var escapedValue = window.encodeURIComponent(value);
var url = "https://www.google.no/#q=" + escapedValue
alert(url);
window.location.href = url;
event.preventDefault();
});
<form class="form" action="test">
<input class="search" name="q" placeholder="Search...">
<input type="submit" class="submit" value="Submit">
</form>

angular js add css when a variable becomes true

I am new to angular js. I am trying to change the border of the fields to red when empty form is submitted.
I have written controller where it processes the input when valid form is submitted and just makes a field(invalidFormSubmitted) to true when invalid form is submitted.
I tried below css but it is not working
input.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
I also tried with ng-submitted, but no luck.
How do i make the field border red when this variable is set to true?
Thanks in advance.
you're looking for ng-class
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
input.invalidFormSubmitted{
border:1px solid red;
}
</style>
<div ng-app="app">
<form name="myForm">
<input type="text" required ng-model="foo" name="sample" ng-class="{'invalidFormSubmitted':myForm.sample.$invalid}" />
</form>
</div>
As you can see the class is applied as long there is no value in the input here
try this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
});
.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="form">
<input name="name" ng-model="name" ng-required="true" ng-class="{'invalidFormSubmitted': form.name.$invalid && check}">
<button type="button" name="button" ng-click="check = true">ENVIAR</button>
</form>
</div>

Click outside button to close popup using toggle

I used toggle to make a search form from a button. But I want click outside any position to close search form, not only using button.
HTML
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>
Jquery :
$(function() {
$(".opensearch").on('click', tapHandler);
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
Demo of JsFiddle
Many thanks for your help.
Use the blur event:
$(".search").on("blur",function(){
$('.search_field').toggle();
});
Updated fiddle: JsFiddle demo
[Edit] You might want to check if the new focus is not on the search icon before hiding the field:
$(".search").on("blur",function(){
setTimeout(function(){
var target = document.activeElement;
target = target ? target.id||target.tagName||target : '';
if(target!="INPUT"){
$('.search_field').toggle();
}
}, 1);
});
Better with the id of the button though....
Example: JsFiddle demo
You can do something like
$(function() {
$(".opensearch").on('click', tapHandler);
//add a click handler to the document object
$(document).on('click', function(e) {
//if the click is happening inside the search_field or opensearch elements then don't do anything
if ($(e.target).closest('.search_field, .opensearch').length == 0) {
$('.search_field').hide();
}
});
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
.search_field {
padding: 10px 10px 0;
position: relative;
}
.search_field .ui-submit {
bottom: -2px;
position: absolute;
right: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>

How change text and color of button Browse of input file?

I design a input file as:
<input type="file" name="file" id="file" size="52" />
I want to change text and color of button "Browse..". Can you help me? thanks all.
There is the pseudo element ::file-selector-button.
Use it like:
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
Appearance and functionality is ok, but this is not your real expected one. think this is help to you.
<input type="text" id="fileName" readonly="readonly" >
<div class="file_input_div" style="display: inline;">
<input type="button" id="button" value="Open"/>
<input type="file" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
</div>
CSS
​#button{
position: relative;
left:-1px;
background-color:#446655;
}​
DEMO
it is browser architecture dependent. you cant do much about it.
still there are already some discussions about this on stackoverflow
you should check this out
Visit How to change the button text of <input type="file" />?
Hope this helps
PS: From next time make sure you are not posting a duplicate question
It is very much browser architecture and OS dependent feature, and it cannot be changed.
Using an overlay
But you can overlay other elements on top of this and hide the default look. You can also use some plugins, which do this for you.
jQuery File Upload is one such plugin capable of doing it.
Demo: http://blueimp.github.com/jQuery-File-Upload/
Please try this :
https://codepen.io/claviska/pen/vAgmd
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse… <input type="file" style="display: none;" multiple>
</span>
</label>
<input type="text" class="form-control" readonly>
</div>
$(function() {
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
// We can watch for our custom `fileselect` event like this
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
You can found it here:
http://www.quirksmode.org/dom/inputfile.html
The post is too long to be copied here.
Basically, you will stylist an input[type=text] (which is user will see), and put an input[type=file] opacity = 0 on top of the input[type=text].
Hope this can help.
For webkit browser only, you can use CSS attribute -webkit-appearance to clear default style and start to stylist it from the beginning.