how can i style a submit button using a external css file
it is the code
<div class="bu">
<form action="#">
<button type="submit" class="but" value="submit">Log in</button>
</form>
</div>
.but {
background: lightBlue;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="bu">
<form action="#">
<button type="submit" class="but" value="submit">Log in</button>
</form>
</div>
</body>
</html>
There are three ways we can use css to style your component
Inline
Internal
External
These the ways are clearly explained in https://www.w3schools.com/html/html_css.asp
Since you are learning css , this also will hlep to you.
https://www.webucator.com/article/how-to-create-a-css-external-style-sheet/
If you need an external style sheet,
Create a style.css file
Link that using style tag inside your html component head tag
Since you are getting started it will be much simpler to include the styles in the HTML. This is how you can embed CSS styles in HTML
<style>
button {
color: read;
background: green;
padding: 5px;
}
</style>
<div class="bu">
<form action="#">
<button type="submit" class="but" value="submit">Log in</button>
</form>
</div>
firstly import the file at the top of the html file, like this:
<link rel="stylesheet" href="mystyle.css">. REPLACE mystyle.css with your file. After that in the css file, add ```.but`{}``, and finally add the style in the curly brackets.
Hello Stack Overflowians, I'm trying to float a form over a background image and I think I'm not doing it right. This is for our company gateway that I'm having to rebuild after many years in production. Below is what I have so far. The first image is my version of it. See how I got the background image to center? https://postimg.cc/nCmTfxVz Now that parts working good.
Next is the old site and the image is way to the left. https://postimg.cc/jn76T6b9
Not meaning to trick our clients, but they really like our old gateway right now, so I'm trying to style it as close as possible to the original one. As you can see, I've been successful in getting it close. (The rounded corners on the new input boxes are fine.) And the placement of the inputs are good with me too. It's just that, I don't believe I'm doing this right, as you can see in my HTML <div class="row" style="margin-top: -190px;"> that's what I'm having to do for now to push the whole form down.
I noticed here (How to place an Html form over an Image) about half-way down the page, #Scott added padding-top: 120px; to the form{} code. I tried adding his CSS but it pushed the form way down off the image.
Note: I still have to place a header up above with the "Registration" and "Forgot Password" links, but I'm not worried about that. I'll work that out myself. If you guys could just steer me in the right direction, or show me a better way to do this, I would be very appreciative. Thanks.
Oh, and here's what it looked like when I would go into responsive mode in Firefox like I was viewing it on a phone. https://postimg.cc/qtq30ccL So I added the media query stuff as you can see in the CSS. And now I have it looking like this. https://postimg.cc/m14q5G7D
Oh, and one more thing. Here's something else to keep in mind. Every now and then, we will be putting a message bar at the top of the page that says something like "Gateway will be down for maintenance over the weekend." or something similar. I will probably just put a Bootstrap banner up there since its so easy and quick to do. So it would be nice to just be able to float everything down while I do that. Just something extra to keep in mind. (-: So below is all of my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>Gateway Reboot v.3.0</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!--link rel="stylesheet" href="Contact-Form-Clean.css"/-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
font-family: 'Roboto Condensed', Arial, sans-serif;
}
.coolbox { /* this is a hold-over from the old web application */
display: block;
font-family: 'Roboto Condensed', Arial, sans-serif;
font-size: 12px;/* was 12.87px */
line-height: 16px;
border: 2px #708090 solid;
height: 22px;
width: 155px;
padding-left: 6px;/* because Bootstrap was putting too much padding on the left */
}
label{
margin-bottom: 0;
}
form{
margin-left: 200px;
}
#media only screen and (min-width: 768px) {
form{
margin-left: 25%;
}
/*img {
opacity: 0.6;
}*/
}
#media only screen and (max-width: 600px) {
form{
margin-left: 25%;
margin-top: 15%;
}
img {
opacity: 0.1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="bigbackKey.png" class="img-fluid d-block mx-auto" alt="Sample Image" />
<!--section class="contact-clean"-->
<div class="row" style="margin-top: -190px;"><!--Just doing this for now to push the "form" row down. I know it's probably not the right way to do it.-->
<div class="col-md-6"></div>
<div class="col-md-6">
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control coolbox" id="username" name="username" />
<!--/div-->
<!--By combining these 2 divs, it removed a big gap between the username box/label and password box/label.-->
<!--div class="form-group"-->
<label for="password">Password</label>
<input type="password" class="form-control coolbox" id="password" name="password" />
</div>
<div class="form-group"><button class="coolbox" type="submit">Login</button></div>
</form>
</div>
</div>
<!--/section-->
</div>
</div>
</div>
</body>
</html>
this is very basic code as I'm still a beginner, I'm having trouble getting it to load into Chrome via Brackets on OSX.
When I load the file locally it displays everything but the CSS is not loading, everything else is functioning properly.
My troubleshooting so far:
index.html and my tutoringservices.html are in the same directory as style.css.
I've saved and restarted my computer to make sure it wasn't a refresh issue
Cleared Chrome's cache to make sure the CSS was being loaded properly
I've copypasted CSS code from w3schools.com and other basic websites to make sure the basic code would function properly. I removed everything but the .button styling, as that's what I was originally trying to troubleshoot, not so much the font import.
I don't know how open Firefox thru Brackets so I have not loaded Firebug.
I have not yet linked the CSS to my index.html as in theory it should work on tutoringservices.html anyhow. Here's my code:
tutoringservices.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
</head>
<body>
<header>
Home
</header>
<main>
<h1>Get in Touch</h1>
<hr>
<p>
Thank you for your interest. Inquiries usually receive a response within 24 hours.
<br>If you do not receieve a timely response, please feel free to send another!</p>
<form class="contact-form" action="contactform.php" method="post">
<input type="text" name="name" placeholder="Full name">
<br><br>
<input type="text" name="mail" placeholder="Your E-Mail">
<br><br>
<input type="text" name="phone" placeholder="Phone Number (optional)">
<br><br>
<input type="text" name="subject" placeholder="Subject">
<br><br>
<textarea name="message" placeholder="Message"></textarea>
<br><br>
<button type="submit" name="submit">SEND</button>
</form>
</main>
</body>
</html>
style.css
#charset "UTF-8";
.paragraph {
font-size: 50px;
line-height: 62px;
font-family: 'Amatic SC', cursive;
}
font-family: 'Amatic SC', cursive;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Be happy to answer any additional questions, thanks for your time.
The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element.
Two options:
Style the element instead of the class by removing the dot
Add the class to the css file, for example on the button:
<button class="button" type="submit" name="submit">SEND</button>
Use classes in your HTML code. In your CSS you use, for example, .paragraph - so use it in HTML as well: <p class="paragraph">, and the same for button.
Second issue is a little bit more tricky to spot, but easier to fix. You have a wayward CSS declaration outside of any selector in your style.css file, on line 9. Simply remove it:
font-family: 'Amatic SC', cursive;
Do those two fixes and you will be golden.
Ok the problem as I see it (assuming the directory of css file is correct), is that your referring in your css code the classes ".paragraph" and ".button" which do not exist in your html code. When you refer in css to some part of html, you do it as follows:
for id ex:
html
<div id="my_id">
css
#my_id{}
- "." for class
html
`<div class="my_id">`
css
`.my_id{}`
- just the tag name for the tag itself
html
`<div>`
css
`div {}`
you must be careful when referring by tag names.
You man not need the ./ if it is in the same directory in the href="style.css". When it comes to the paragraph and button, your css is referring to them as classes by adding a "." before them. If you just want to call them by html tag
p {
// put style for all paragraph tags here
}
button {
// put styling for all buttons here
}
I'm working on a project using the Axentix framework.
I used their material forms and the animated bottom border color doesn't match with my website's main color.
Here is their input example : https://useaxentix.com/docs/forms/material
If someone has an idea to customize it, it will be really helpful.
Thanks a lot.
Happy to see you using Axentix !
As aprilunge explained, a way to custom the material forms color is to download the source files.
But there is another way we are gonna to custom any material element color without downloading the source files, we're going to add it on the docs soon.
To custom a material text-input, here is the code :
.form-material .form-field:not(.form-default).active textarea.form-control,
.form-material .form-field:not(.form-default)::after {
border-bottom: .1rem solid YOUR_COLOR;
}
.form-material .form-field:not(.form-default).active label {
color: YOUR_COLOR;
}
You can ask us if you want to change the checkboxes or radio colors too, but know that we are going to add these examples on the https://useaxentix.com/docs/forms/material soon.
If you need help and want to ask us any question, you can join us on gitter :
https://gitter.im/axentix/home
Here is an example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix#0.4.3/dist/css/axentix.min.css" />
<style>
.form-material .form-field:not(.form-default).active.is-txtarea-focused textarea.form-control,
.form-material .form-field:not(.form-default)::after {
border-bottom: .1rem solid #e92626;
}
.form-material .form-field:not(.form-default).active label {
color: #e92626;
}
</style>
</head>
<body>
<div class="container">
<h1>Example form</h1>
<form class="form-material">
<div class="grix xs1">
<div class="form-field">
<input type="text" id="name" class="form-control" />
<label for="name">Name</label>
</div>
<div class="form-field">
<label for="textarea">A textarea</label>
<textarea id="textarea" class="form-control"></textarea>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axentix#0.4.3/dist/js/axentix.min.js"></script>
</body>
</html>
Have a great day !
Axentix team.
You can use the SCSS source files of Axentix. If you do so, you can overwrite the default variables with the needs for your project easily.
In your specific case the variable you search for is $material-color.
Is it possible to use Font Awesome Icon in a Placeholder? I read that HTML isn't allowed in a placeholder. Is there a workaround?
placeholder="<i class='icon-search'></i>"
If you're using FontAwesome 4.7 this should be enough:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).
You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
With this CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
And this (simple) jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
The transition between fonts will not be smooth, however.
I solved with this method:
In the CSS I used this code for the fontAwesome class:
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
In the HTML I have added the fontawesome class and the fontawesome icon code inside the placeholder:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
You can see in CodePen.
#Elli's answer can work in FontAwesome 5, but it requires using the correct font name and using the specific CSS for the version you want. For example when using FA5 Free, I could not get it to work if I included the all.css, but it worked fine if I included the solid.css:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
For FA5 Pro the font name is 'Font Awesome 5 Pro'
Where supported, you can use the ::input-placeholder pseudoselector combined with ::before.
See an example at:
http://codepen.io/JonFabritius/pen/nHeJg
I was just working on this and came across this article, from which I modified this stuff:
http://davidwalsh.name/html5-placeholder-css
I am using Ember (version 1.7.1) and I needed to both bind the value of the input and have a placeholder that was a FontAwesome icon. The only way to bind the value in Ember (that I know of) is to use the built in helper. But that causes the placeholder to be escaped, "" just shows up just like that, text.
If you are using Ember or not, you need to set the CSS of the input's placeholder to have a font-family of FontAwesome. This is SCSS (using Bourbon for the placeholder styling):
input {
width:96%;
margin:5px 2%;
padding:0 8px;
border:1px solid #444;
border-radius: 14px;
background: #fff;
#include placeholder {
font-family: 'FontAwesome', $gotham;
}
}
If you are just using handlebars, as has been mentioned before you can just set the html entity as the placeholder:
<input id="listFilter" placeholder="" type="text">
If you are using Ember bind the placeholder to a controller property that has the unicode value.
in the template:
{{text-field
id="listFilter"
placeholder=listFilterPlaceholder
value=listFilter}}
on the controller:
listFilter: null,
listFilterPlaceholder: "\uf002"
And the value binding works fine!
Use placeholder="" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ .
But you have to make sure add style="font-family: FontAwesome;" in your input.
Anyone wondering about a Font Awesome 5 implementation:
Do not specify a general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here I am using the branch "Brands" for example.
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
More detail Use Font Awesome (5) icon in input placeholder text
I know this question it is very old. But I didn't see any simple answer like I used to use.
You just need to add the fas class to the input and put a valid hex in this case  for Font-Awesome's glyph as here <input type="text" class="fas" placeholder="" />
You can find the unicode of each glyph in the official web here.
This is a simple example you don't need css or javascript.
input {
padding: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
<div class="form-group">
<input type="text" class="fas" placeholder="" />
</div>
</form>
I do this by adding fa-placeholder class to input text:
<input type="text" name="search" class="form-control" placeholder="" />
so, in css just add this:
.fa-placholder {
font-family: "FontAwesome"; }
It works well for me.
Update:
To change font while user type in your text input, just add your font after font awesome
.fa-placholder {
font-family: "FontAwesome", "Source Sans Pro"; }
Ignoring the jQuery this can be done using ::placeholder of an input element.
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</div>
</form>
The css part
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }
input.name{ font-family:[font family you want to specify] }
THE BEST PART:
You can have different font family for placeholder and text
If you can / want to use Bootstrap the solution would be input-groups:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="-">
</div>
Looks about like this:input with text-prepend and search symbol
I've solved the problem a bit differently and it works with any FA icon through html code. Instead of all these difficulties with placeholder my solution is:
To place an icon in the usual manner
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">
CSS
.block__icon {
position: absolute;
margin: some-corrections;
}
.block__input {
padding: some-corrections;
}
Then adjust placeholder's text (it's personal for everyone, in my case an icon was just before the text)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
Here is the problem that an icon is above the our input and blocks cursor to click so we should add one more line in our CSS
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
But an icon doesn't disappear together with placeholder so we need to fix it. And also this is the final version of my solution:
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder=" Some text">
CSS
.block__icon {
position: absolute;
z-index: 2; /* New line */
margin: some-corrections;
}
.block__input {
position: relative; /* New line */
z-index: 2; /* New line */
padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
z-index: 1;
}
It's harder than I thought before, but I hope I've helped anyone with this.
Codepen: https://codepen.io/dzakh/pen/YzKqJvy
There is some slight delay and jank as the font changes in the answer provided by Jason. Using the "change" event instead of "keyup" resolves this issue.
$('#iconified').on('change', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
I added both text and icon together in a placeholder.
placeholder="Edit "
CSS :
font-family: FontAwesome,'Merriweather Sans', sans-serif;
Teocci solution is as simple as it can be, thus, no need to add any CSS, just add class="fas" for Font Awesome 5, since it adds proper CSS font declaration to the element.
Here's an example for search box within Bootstrap navbar, with search icon added to the both input-group and placeholder (for the sake of demontration, of course, no one would use both at the same time).
Image:
https://i.imgur.com/v4kQJ77.png ">
Code:
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control fas text-right" placeholder="" aria-label="Search string">
<div class="input-group-append">
<button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
</div>
</div>
</form>
Sometimes above all answer not woking, when you can use below trick
.form-group {
position: relative;
}
input {
padding-left: 1rem;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>
.form-group {
position: relative;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
input {
padding-left: 1rem;
}