I'm having a bit of trouble with a set of 2 radio buttons, that in Chrome, will not change state regardless of using the mouse or using the keyboard.
This is the HTML:
<!-- Dialog Boxes -->
<section class="add-movie-dialog">
<section class="dialog-box">
<form class="dialog-container" name="add-movie-dialog-form" action="">
<header class="dialog-title">
New movie.
</header>
<section class="dialog-content">
<p>
Add a new movie to the library:
</p>
<input type="radio" name="add_option" value="file" checked="checked" />by selecting a file...
<br />
<input type="radio" name="add_option" value="empty" /> empty entry...
</section>
</form>
</section>
</section>
This is the CSS (infact less but close enough):
.add-movie-dialog {
#mixin.flex-container( column, center, stretch, nowrap );
background: fadeout( #black, 50% );
height: 100%;
left: 0px;
line-height: 1.5em;
position: fixed;
top: 0px;
width: 100%;
.dialog-box {
#mixin.flex-container( column, flex-start, center, nowrap );
background: #darkgrey;
padding: 2em;
.dialog-container {
width: 66%;
.dialog-title{
#mixin.font( x-large );
padding-bottom: 1em;
}
.dialog-content{
letter-spacing: 0.1em;
padding-bottom: 1em;
& > p {
padding-bottom: 10px;
}
}
}
}
}
This is an image of it:
sample image
Now, the highlighted radio button will not change to "empty entry" using either mouse or keyboard and I'm stumped as to why, as afaik the code is valid and should work (unless I'm missing something here).
Related
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
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 editing an AngularJS project and i want to add a backdrop (like Bootstrap Modal) over the main DIV when users click on search input box.
Here is the HTML code:
<div class="main-box">
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
As you can see the white box appears when users click on the search icon and now i want to add a backdrop over the main DIV, except on the white box.
Here is the LESS code:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
position: relative;
z-index: 0;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
How can i reach this?
Something like this
<div class="main-box">
<div class="backdrop" ng-if="showForm"></div>
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
And add the CSS as
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
}
Here's a very complete article about different methods of achieving what you need
CSS Overlay Techniques
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
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;
}