Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my input from this :
to this :
but, I had some trouble, I can't find the keyword on google how to make my input like that, anyone can tell me what should keyword I must input in google to know how to change my input like in second picture, thanks
You just need to modify your css like in the given example below, You can modify any element as per your requirements.
form {
background-color: #fff;
padding: 50px 20px;
}
label {
display: block;
font-size: 20px;
color: #42C8F1;
margin-bottom: 5px;
}
input {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #ddd;
background-color: transparent;
outline-color: #fff;
}
input:focus {
outline: none !imporant;
}
<form>
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name">
</form>
You can do it with just simple CSS. I have just added simple CSS but you can add as your design requirements.
label{color:blue;font-weight: bold;display: block;}
input[type=text]{border: 0;outline: 0;padding: 5px 0;border-bottom: 1px solid black;}
<form>
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name">
</form>
Related
This question already has answers here:
Reset Styles for input elements and restyling to bring back the default appearance
(2 answers)
Closed 5 years ago.
Is there a way to reset the border of an input to its default? Using initial is supposed to do just that but instead removes the border completely.
.textinputs {
border: 1px solid red;
}
#txtReset {
border: initial;
}
<input type="text" class="textinputs" value="hello" />
<input id="txtReset" class="textinputs" type="text" value="world" />
The textinputs class can't be removed as it's set through a server control (the inputs are server controls rendered with the class).
The answer here is outdated and no longer valid as we now have the initial keyword.
You can redefine css for world textbox like:-
#txtReset {
border:1px solid #ccc;
}
input[type='text'] {
border: 1px solid red;
}
#txtReset {
border:1px solid #ccc;
}
<input type="text" value="hello" />
<input id="txtReset" type="text" value="world" />
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
How can I make the selector on the right work like the image on the left?
By styling the label tied to the checkbox instead, utilizing the for attribute and hiding the input field.
input {
display: none;
}
label {
border: 1px solid #999;
background: #eee;
padding: .5em;
margin: 0 .5em 0 0;
display: inline-block;
}
input:checked + label {
border: 1px solid green;
}
<input id="one" type="checkbox" name="thing"><label for="one">one</label>
<input id="two" type="checkbox" name="thing"><label for="two">one</label>
<input id="three" type="checkbox" name="thing"><label for="three">one</label>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make the default size of the input fields and button on my form 3X larger than normal as well as the text that appears inside the input fields be 3X larger than the default.
I've seen this done before but I'll be damned if I can even find any code to get me started.
To make the input fields and buttons bigger, you will need to use CSS Selectors to carry this out, I'll give you a quick example on a basic form:
HTML:
<form ID="Form" action="Contact.php" method="post">
<!-- Standard input text boxes -->
<input type="Text" name="FirstName" placeholder="First Name">
<input type="Text" name="Surname" placeholder="Surname">
<!-- Submit button -->
<input type="submit" value="Submit" name="Submit">
</form>
CSS:
input[name=FirstName] {
font-family: Arial;
font-size: 16px;
width: 300px;
height: 150px;
font-weight: bold;
}
input[name=Surname] {
font-family: Arial;
font-size: 16px;
width: 300px;
height: 150px;
font-weight: bold;
}
input[type=submit] {
width: 300px;
height: 300px;
font-family: Arial;
font-size: 16px;
background: #DF0101; /* red */
box-shadow: #6E7849 1px 1px 10px;
color: white;
}
Here is a jsfiddle.net example of what I have just done, all the widths and heights etc can then be modified to suit your preference in the CSS stylesheet.
http://jsfiddle.net/tduagdnt/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I styled a DIV using CSS on one of my pages.
The CSS looked think this:
#login {
background-color: #FFFFFF;
width: 600px;
height: 250px;
margin: 0 auto;
border: solid;
border-color: #00ae00;
-moz-border-radius: 15px;
border-radius: 15px;
Padding-top: 10px;
text-align:center;
}
and it worked as desired
I then realised i wanted to same styling for a number of DIVs on other pages. So my theory was just to change the above CSS to:
#login, register, home {
background-color: #FFFFFF;
width: 600px;
height: 250px;
margin: 0 auto;
border: solid;
border-color: #00ae00;
-moz-border-radius: 15px;
border-radius: 15px;
Padding-top: 10px;
text-align:center;
}
Just to show you how one of my other DIVs is placed
<div id="register">
<form action='register.php' method='post'>
<h1>Register Here:</h1>
<h4><?php echo $message; ?></h4>
Username:<input type='text' name='username'
value='<?php echo $username; ?>'><br />
Password:<input type='password' name='password'><br />
Repeat Password:<input type='password' name = 'repeatpassword' >
<?php echo $recaptcha_form; ?>
<input type='submit' name='submit' value='Register'>
<input name ='reset' type='reset' value='Reset'>
</form>
<h2>Once you have registered, log in <a href='login.php'>here!</a></h2>
</div>
but it is simply not styling it at all?
any idea?
(please bare in mind im quite new to coding!)
You have missed to give # before id selector.
so the actual way will be
#login, #register, #home
{
// your css
}
You can see how to deal with multiple selector at once from
here
Do it like this:
#login, #register, #home
I try to create login page contains username and password but i want rounded grouped inputs(username and password). I tried this:
border: none;
border-color: transparent;
using css, but still border is coming what might be error.
Solution 1
Working example: http://jsfiddle.net/Gajotres/95Paz/
CSS used:
.ui-input-text {
border: none !important;
border-color: transparent !important;
}
Solution 2
Working example: http://jsfiddle.net/Gajotres/95Paz/1/
HTML
<div id="wrapper">
<input type="text" style="border:none" autocorrect="off" autocapitalize="off" name="username" id="username" placeholder="Username or Email" />
<input type="password" style='border-radius:5px;' id="password" placeholder="Password" />
</div>
CSS
#wrapper .ui-input-text {
border: none;
border-color: transparent;
}
More info
When working with jQuery Mobile you need to understand that final HTML content is enhanced and it don't look like previous one. Also when overrding classes !important must be used. Read more about it here.
When using jQuery Mobile, you need to disable its auto-enhanced as follow
HTML
<input type='text' data-role='none'>
CSS
input, input:hover, input:focus, input:active {
background: transparent;
border: 0;
border-style: none;
border-color: transparent;
outline: none;
outline-offset: 0;
box-shadow: none;
}