I am trying to remove a border from a input text field for my contact form.
Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.
I tried my best to mess around with the CSS to make it work, but somehow its not working.
HTML
<section id="contact">
<div class="container">
<h3 class="contact-section-title">Need advice?</h3>
<p class="contact-section-sub-title-form">Drop me an email below.</p
<div class="grid-row col-2">
<div class="grid-unit3">
<form name="form1" method="post" action="contact.php" >
<input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
<input name="cf_email" placeholder="What is your email? (Eg: johndoe#johndoe.com)" type="email" required />
<textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
<button class="submit" type="submit">Send email</button>
<br><Br><br><Br>
</form>
</div><!--class="email" type="email"-->
</div>
</div>
</section>
JSFiddle
Would appreciate some solid help on this. Don't know where to go from here.
Thank you.
Changes I made ->
border:0px solid #58B9FA;
line 105.
The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:
input {
border: 0
}
Updated Fiddle
Changed the border property in css from following
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:1px solid #58B9FA; }
to
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:0px solid #58B9FA; }
set border: none; or border:0 in your input css
FIDDLE
Related
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}
#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
I'm making a contact form. Now obviously I'll want the message box bigger than the Email and Subject input boxes. So obviously I can't just type in my input in css because it'll change all boxes. I thought specifying the message box would go something like this
input [type="text" name="message"] {
padding-bottom: 500px;
}
That obviously didn't work... So what am I doing wrong?
HTML
<div id="contactContent">
<form>
<label>Email:</label><input type="text" name="email" />
<br>
<label>Subject:</label><input type="text" name="subject" />
<br>
<label>Message:</label><input type="text" name="message" />
</form>
</div>
CSS
#contactContent {
margin-top: 50px;
margin-left: 350px;
}
input {
border: none;
background-color: #CCCCCC;
margin-left: 20px;
margin-bottom: 5px;
padding-right: 250px;
padding-top: 13px;
padding-bottom: 13px;
}
label {
display:inline-block;
width:100px;
font-family:maven;
color: #FF6464;
font-size: 20px;
text-align: right;
}
input [type="text" name="message"] {
padding-bottom: 500px;
}
Your selector is incorrect, the correct way to apply a style to the element via both its type and name would be:
input[type="text"][name="message"] {
padding-bottom: 500px;
}
Although you'd be better off using a class or id to target the element unless you have a good reason for doing it like that.
The better option for a message box is the <textarea> element:
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
Then styles for that don't compete with the input styles.
Anyhow, if for some reason you do just want a one line input, another styling hook would be a unique class or id.
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}