I was wondering how could you set height of an image to the neighboring elements height. So, essentially I want to have it like this:
[div] [img]
Other than javascript I can't see a way how can I do this. So, instead of using js can I just use CSS?
Thank you
Code so far(nothing special):
<div style="text-align:right;">
<label for="file-upload">Choose file</label>
<img><!-- Updates dynamically using js-->
<input id="file-upload" type="file" name="photo"/>
<input type="submit" value="Upload Image" name="submit" />
</div>
In order to style neighboring elements in CSS you can use adjacent selector(plus sign).
As in following:
label + img{height:300px}
That will target img in your code "after" any label.
JSFiddle
Related
So I'm trying to add some additional CSS on Wordpress and override the color of this form button but nothings happening. Am I entering the right code in here?
When I inspect the button this comes up...
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
<div class="input-icon"><i class="far fa-paper-plane"></i></div>
<input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
<button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>
The reason why I've tried button.item-btn::before is because it shows this in the inspector
Try adding the CSS styling as inline with the button element.
Inline styling will override the styling from an external css file.
You can also try using the id selector id=mc4wp-form-1 in your form element to increase the css style specificity to help overwrite the default.
Your selector minus the pseudo-element should do the job.
Maybe there is another background-color definition for buttons in your stylesheets with higher specificity.
You could try raising the specificity of your selector like this:
#mc4wp-form-1 button.item-btn {
background-color: mycolor;
}
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I want to create custom styling for my form elements. Therefore I have to add a parent element to each input and select element. The parent element will contain the CSS classes for the styling. Example:
<div class="o-form-field is-valid">
<input formControlName="foo">
</div>
<div class="o-form-field is-invalid">
<input formControlName="bar">
</div>
<div class="o-form-field has-error">
<input formControlName="baz">
</div>
I am looking for a solution where I can replace the outer DIV with a component that watched the child input state and figures out what classes are needed. Renders the DIV in it's template and transcludes the input element. So my form template would look something like this.
<form-field-container>
<input formControlName="foo">
</form-field-container>
<form-field-container>
<input formControlName="bar">
</form-field>
<form-field-container>
<input formControlName="baz">
</form-field>
I am using Reactive forms.
I am using a CMS system that allows you to edit multiple content areas inside the main space (like all of them). What I am trying to do is for each editable content area I want to show a certain background color. The Main-Content = white and the right rail would be red when editing them.
Since everything is generated on the fly once the edit button is clicked, and everything between the two are are the same besides a input value, I am trying to say if the input value = main content show white if the value is right rail show red on the editor's body tag #tinymce.mceContentBody. I can only use CSS and I can not add to the HTML (so no adding IDs and classes).
Below is a cut out of some of the code generated. If you scroll through it, you will see the line <input id="label" type="hidden" value="Main-Content" name="label"></input>. That is the only thing that is different among the two editable areas. One is Main-Content and the other is Right-Right(not shown below). Can this be done? Can I drill down - The only thing I can think of is using that label value, but I am not sure how to code that and if it possible to say it is the parent of the editable area. I tried doing something like this - input[value="Main-Content"] #tinymce.mceContentBody {background-color:#FFF;} This failed and I am sure I am coding it incorrectly, but I think there might be something like this that will work.
NOTE this is the code and can not be changed at all -
<form id="wysiwyg_form" method="post" action="/servlet/OX/iesave">
<input id="site" type="hidden" value="test-email" name="site"></input>
<input id="path" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="path"></input>
<input id="newPath" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="newPath"></input>
<input id="label" type="hidden" value="Main-Content" name="label"></input>
<input id="dest" type="hidden" value="preview" name="dest"></input>
<textarea id="text" rows="1" cols="1" name="text" style="display: none;" aria-hidden="true"></textarea>
<span id="text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="text_voice">
<span id="text_voice" class="mceVoiceLabel" style="display:none;"></span>
<table id="text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100px; height: 100px;">
<tbody>
<tr class="mceFirst" role="presentation"></tr>
<tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="text_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 1000px; height: 703px; display: block;">
#document
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml"></head>
<body id="tinymce" class="mceContentBody oucampus-wysiwyg" contenteditable="true" onload="window.parent.tinyMCE.get('text').onLoad.dispatch();" dir="ltr">
<p>This is where the content gets displayed - I want this BG to be white and be red when the label above is right rail</p>
The way to accomplish this is to use the 'wysiwyg-class' attribute in the either the editor tag inside of your editable regions. That class will be added to the node of the TinyMCE editor and then one css can modify the margins, width, height position of the body based on the class
body.main_content { }
body.left_column { }
<!-- com.omniupdate.div ....
<!-- com.omniupdate.editor ... wysiwyg-class="left_column" ...