I have a form in HTML as follows:
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
And I have applied simple CSS to the textarea from an external file as follows:
textarea.input-width {
width:800px;
height:200px;
}
I have included the style sheet in the html as:
<link rel="stylesheet" type="text/css" href="styles.css"/>
still the width and height are not being applied to the HTML. I am not a front-end developer, so I am pretty dumb when it comes to HTML and CSS, so please any help is appreciated.
It seems to have an effect when I do that example in local files.
With CSS:
Without CSS:
So I think perhaps your code is fine, and it's just that your website is still cached by your browser. Try reloading with CtrlShiftR or if it works in a different browser.
(This answer should be comment, but I needed a code snippet)
Your CSS and HTML seem correct, if you run the code snippet below you'll see that the styling is actually being applied.
This lets me believe that your stylesheet is not being loaded properly. Can you verify in your devtools that the <link /> tag exists and the styles load properly? You can do this by right clicking on the textarea element and clicking inspect element. You should now see several columns or rows depending on your devtools window orientation which show the HTML and CSS for the selected element. Your CSS code should be visible over there.
textarea.input-width {
width:800px;
height:200px;
}
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
Related
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 have to set equal widths to a textbox and a select element.
When I remove the !DOCTYPE both the input fields are set to equal lengths,that is 185px each accordingly.
With DOCTYPE the width of the textbox is slightly more than the select element. If I check its width by javascript with offsetWidth property it is found to be 189px instead of 185px that I have set in my CSS.
The screenshot of the output:-
The code snippet:-
<!DOCTYPE html>
<html>
<style>
.usrInput{width:185px}
</style>
<body>
<div id="content">
<form>
<input type="text" name="fname" id="fname" class="usrInput"/><br/>
<select name="state" id="state" class="usrInput">
<option value="">Select State
</select><br/>
</form>
</div>
</body>
</html>
I think it is the user agent stylesheet that is somehow overriding my own CSS. I don't know actually why is it happening and what should I do to overcome this problem?
If you use
.usrInput {
box-sizing: border-box;
}
the dropdown and the input size will match up.
Edit: Usually you can use a css reset such as normalize.css to automatically take care of little quirks like this.
I loaded to my project nice input and my goal is to put inside this input the clickable button/a tag with float:right. Inside my local version of this, after clicking the button/a tag(question mark) animation start to happen, in jsfiddle example it doesn't even react. I don't have any ideas how to solve this problem, not changing the input source(design is cool).
https://jsfiddle.net/yoofu5me/5/
<div class="row">
<div class="col-md-6 col-md-offset-3">
<span class="input input--haruki text-center" style="margin-top: 10px;">
<input class="input__field input__field--haruki" type="text" id="input-1" />
<label class="input__label input__label--haruki" for="input-1">
<span style="font-size:14px;" class="input__label-content input__label-content--haruki">Give me the word </i></span>
</label>
</span>
</div>
</div>
The pointer-event: none; CSS rule is set on the parent element of the link (question mark).
Removing this rule solves the problem.
The problem is - you haven't linked the css with your html file.
The link that you've provided also has a CSS. Save that in styles.css. Then go to your HTML file - add this in tag
<link rel="stylesheet" href="styles.css">
I am implementing a input box with the following:
<input id="searcher" type="text" placeholder="Search Friends"
style="position:absolute; background-color:white; display:block; -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px;">
I have used mobile jquery in my code:
<link rel="stylesheet" href="./styles/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
However, the result is not what I want. I looked the elements in the browser debugging console. I noticed that the input tag is wrapped up in another div:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input ...>
</div>
I have no idea what is going on here. Why mobile jquery do this? And how to remove this effect? Thank you very much!
That's one of the main features of jQuery Mobile: it turns native input elements into mobile-friendly versions with its own styles. You can turn it off by adding data-role="none" to the element:
<input id="searcher" type="text" data-role="none" placeholder="Search Friends" ... >
Demo: http://jsfiddle.net/LtLCR/
Thanks for the answer! Thought I'd share my Meteor Blaze Component scenario...
Symptom:
Pressing the 'enter' key on the EasySearch.Input doesn't trigger a search.
Problem:
Jquery Mobile 'Input' element control inadvertently disables EasySearch.Input event handlers.
Solution:
As per your answer, disable the Jquery Mobile 'Input' element adornment/behaviour but keep the style.
Implementation:
Wrap the input with a Jquery mobile looking wrapper.
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
{{> EasySearch.Input index=transcriptIndex attributes=inputAttributes event="enter"}}
</div>
The corresponding template helper inputAttributes simply adds the `data-role="none" attribute (CoffeeScript!)
Template.transcriptSearch.helpers
inputAttributes: ->
{
placeholder: "Search...",
'data-role': "none"
}
I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels